007 Javascript(080 - 092)

[A] 认识事件

事件基础：Javascript事件是由访问web页面的用户引起的一系列操作；

　　当用户执行某些操作的时候，再去执行一些列代码；

　　或者获取事件的详细信息，如鼠标位置，键盘按键等。

1. javascript可以处理的事件类型为：

　　A.鼠标事件

　　　　click: 单击鼠标的键钮。

　　　　dblclick：双击鼠标的键钮。

　　　　mouseover：鼠标移入。

　　　　mouseout：鼠标移出。

　　　　mousemove：鼠标移入(不停的触发)。

　　　　mousedown：鼠标的键被按下。

　　　　mouseup：鼠标的键被释放弹起。

　　　　mouseenter: 鼠标移入(冒泡，即同样会去触发子节点)。

　　　　 mouseleave: 鼠标移出(冒泡，即同样会去触发子节点)。

　　B.键盘事件(表单元素，全局window)

　　　　 keydown：键盘按下(若按下不松手，则会一直触发)

　　　　 keyup：键盘抬起

　　　　keypress：键盘按下(只支持字符键)

　　C.HTML事件

　　　　1.window事件

　　　　　　 load 当页面加载完成以后的触发

　　　　　　unload 当页面解构(页面刷新，关闭等使页面消失)的时候触发。

　　　　　　scroll 当前页面发生滚动时触发

　　　　　　resize 当前窗口发生大小变化时触发

　　　　 2.表单事件

　　　　　　 blur 失去焦点

　　　　　　focus 获取焦点

　　　　　　select 在输入框中选中文本时触发

　　　　　　change 输入框中的文本被修改，并且失去焦点

　　　　　　【注】必须添加在form元素上

　　　　　　 submit 当点击submit按钮时触发

　　　　　　 reset 当点击reset按钮时触发

　　2. 所有事件处理函数都会有两个部分组成，on+事件名称

　　　　　　　　　　【注】系统会在在事件绑定完成的时候，生成一个事件对象；

　　　　　　　　　　　　事件触发的时候，系统会自动去调用事件绑定的函数，将事件对象当作是第一个参数传入。

　　　　　　　　　　　　// 这种通过形参拿事件事件对象的方式在IE8以下不兼容，IE8以下用window.event   
 　　　　　　　　　　　　// IE8以下调用方式(固定用法)
　　　　　　　　　　　　function show(ev){           
            　　　　　　　　var e = arg||window.event;
            　　　　　　　　alert(e);
        　　　　　　　}

　　3. javascript事件绑定的两种模式：

　　1.内联模式事件在行间绑定

　　 function btn(){

　　　　alert("你好，很高兴见到你！！！");

　　 }

　　<div id="div1" onclick="btn()">nihao</div>

　　2.外联模式/脚本模式(更常用)

　　　　事件在window.onload = fucntion(){}函数中调用

[B] 事件绑定方法

　　　　事件绑定：

　　元素节点.on + 事件类型 = 匿名函数

　　【注】系统会在在事件绑定完成的时候，生成一个事件对象；

　　　　当事件被触发的时候，系统会自动去调用事件绑定的函数，将事件对象当作是第一个参数传入。

[C] 鼠标事件对象属性

鼠标事件对象属性:

　　1. buttton属性

　　　　　　　　　　【取值】

　　　　　　　　0 左键

　　　　　　　　 1 滚轮

　　　　　　　　 2 右键

　　　　　　2. 获取当前鼠标位置：(原点位置不一样)

　　　　clientX clientY 原点在可视窗口的左上角

　　　　 pageX pageY 原点在整个页面的左上角(包含滚动之前的部分)

　　　　screenX screenY 原点在电脑屏幕的左上角

　　3. 跟随鼠标移动提示框

　　　　事件类型：

　　　　　　mouseover

　　　　　　　　　　让提示框显示

　　　　　　mouseout

　　　　　　　　　　让提示框隐藏

　　　　　　mousemove

　　　　　　　　　　让提示框移动

　　4. 事件对象的属性：

　　　　shiftKey //按下shift键，为true，，默认为false。

　　　　altKey //按下shift键，为true，，默认为false。

　　　　ctrlKey //按下shift键，为true，，默认为false。

　　　　mataKey //window系统下，按下windows(开始)键，为true。

　　　　　　//macos系统下，按下command键，为true。

　　　　　【作用】：这四个键可以和其他的键组成快捷键。

[D] 键盘事件属性

1. keyCode 键码

　　　　which(which为其他操作系统下的键码)

　　　　　　【注】只在keydown下支持，也就是键盘按下才有效

　　　　　　【返回值】键码的返回值不区分大小写的ASCII键码值(支持功能键)

　　通用的固定调用格式 var w = e.which || e.keyCode;

2. charCode 字符码

　　　　 which(which为其他操作系统下的键码)

　　　　　　【注】只在keypress下支持。

　　　　　　【返回值】键码的返回值区分大小写的ASCII键码值(不支持功能键)

　　通用的固定调用格式 var w = e.which || e.charCode;

[E] 事件对象属性：

1. target //目标对象(或触发对象)

　　　　 IE8以下不兼容，采用window.event.srcElement;

　　　　　　　　如: 鼠标点击 li, 则该点击事件的 target 就是该 li。

　　　【注】目标对象(或触发对象)指向的是这个事件由谁引起的。

　　　　　　　　面向对象语言中 this 表示当前对象的一个引用。

　　　　　　　　但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

- - - 在方法中，this 表示该方法所属的对象。
    - 如果单独使用，this 表示全局对象。
    - 在函数中，this 表示全局对象。
    - 在函数中，在严格模式下，this 是未定义的(undefined)。
    - 在事件中，this 表示接收事件的元素。
    - 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

　　　　　　 this 每个函数都会有一个this，它永远指向当前函数的主人。

　　　　　　【区别】target一旦确定就不会变

　　　　　　　　this会根据环境自动变化

2. 浏览器上的事件天生就有一个特点，叫事件流。

　　　　事件冒泡：由里向外逐级触发

　　　　事件捕获：由外向里逐级触发

3. 阻止事件冒泡：存在浏览器兼容问题

　　cancelBubble = true // 给事件对象本身取消其冒泡属性

　　stopPropagation() // 调用该事件对象的方法，阻止事件对象冒泡

[F] 拖拽效果

1. 拖拽三剑客：mousedown,mousemove,mouseup

2. 实现方法：0. 目标对象设置为可移动的，即 position: absolute；

　　 1. 鼠标左键按下时，记录鼠标与目标对象左上角的相对位置；

　　 2. 鼠标移动时，将目标对象的位置设置为鼠标的位置减去它俩的相对位置；

　　 3. 鼠标左键松开时，目标对象的位置不再变化。

3. 拖拽效果的函数封装：

// 拖拽(可以越界)
function dragFree(node){
    node.onmousedown = function(ev){
        var e = ev || window.Event;
        // 保存鼠标按下时，鼠标与目标对象的相对位置
        var oLeft = e.clientX - node.offsetLeft;
        var oTop = e.clientY -node.offsetTop;

        document.onmousemove = function(ev){
              var e = ev || window.Event;
              // 鼠标移动时(此时已持续按下)，修改目标对象的坐标
              node.style.left = e.clientX - oLeft + "px";
              node.style.top = e.clientY - oTop + "px";
        }
     }
     node.onmouseup = function(){
         document.onmousemove = null;
      }
}

[G] 事件委托

事件委托:

A委托B去买饭

A发布任务委托方

B接受任务代理方

事件委托实现步骤：

1. 找到当前节点的父节点或者祖先节点

2. 将事件添加到你找到的父节点或者祖先节点上

3. 找到出发对象，判断出发对象是否是想要的出发对象，再进行后续的安排

window.onload = function(){
            var oBtn = document.getElementById("btn1");
            var oUl = document.getElementById("ul1");
            // var oLists = oUl.getElementsByTagName("li");
            oUl.onclick = function(ev){
                var e = ev || window.event;
                var tar = e.target || window.event.srcElement;
                if(tar.nodeName.toLowerCase() == "li"){
                    tar.style.backgroundColor = "red";
                }
            }
            var i = 6;
            oBtn.onclick = function(){
                var node = document.createElement("li");
                node.innerHTML = i++ * 111;
                oUl.appendChild(node);
            }
        }


    <button id="btn1">添加</button>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

[H] 事件监听器

1. 传统的事件绑定存在两个问题：

　　a. 给同一个事件多次绑定，后面的会覆盖掉前面的，最终只有最后一个绑定有效

　　 b. 当同一个事件被绑定多个函数时，无法精确的删除其中某一个函数

2. 事件监听器可以解决上述两个问题

　　　事件监听器的方法：

　　　　addEventListenser()

　　　　格式：node.addEventListenser()

　　　　参数：

　　　　　　第一个参数事件类型，如 click

　　　　　　第二个参数绑定的函数，如 fun1

　　　　　　第三个参数布尔值 false 事件冒泡，默认值

　　　　　　　　　　 true 事件捕获

　　　　removeEventListenser()

　　　　　格式：node.removeEventListenser()

　　　　参数：

　　　　　　第一个参数事件类型，如 click

　　　　　　第二个参数需删除的函数名，如 fun1

3. 事件监听器的兼容

　　在低版本IE中不兼容事件监听器

　　低版本IE支持 attachEvent() 和 detachEvent()

兼容函数：略

[ I ] 动态生成表格

　　　　练习

[J] 放大镜效果

　　　　等比例放大局部图片

　　　　练习

posted @ 2020-06-08 17:36 CarreyB 阅读(201) 评论(0) 编辑收藏举报

刷新页面返回顶部

Carrrey

007 Javascript(080 - 092)

公告