JS 事件及冒泡的应用(二)

一、事件绑定及解绑

onclick（）触发事件

var btn = document.querySelector('button');

btn.addEventListener('click', function() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol;});

移除监听事件

btn.removeEventListener('click', bgChange);

// 兼容IE 的写法是
btn.detachEvent('click',bgChange);

事件B 会覆盖事件A

myElement.onclick = functionA;myElement.onclick = functionB;

事件A 和事件B 都会被触发

myElement.addEventListener('click', functionA);myElement.addEventListener('click', functionB);

最好不要在行内元素添加 onclick 方法，因为已经过时，若有多个同类型的元素，onclick的数量将是巨大的。流行用 querySelector 或者是 querySelectorAll 、getEelementById、getEelementByTagName 等

二、冒泡

     冒泡：若一个视频被点击，则运行完视频的触发事件后，还会运行它所在div 的触发事件。（是IE提出）

     目标：为实现只运行当前的事件，避免触发上级事件：stopProgation()

     捕获：从外向内触发事件。在上例中，则先触发 div 事件，再触发 video 事件（chrome 提出）

addEventListener（'click '，function(e){....}），true/false} true 为捕获，false为冒泡

三、委托

事件委托（事件代理）：利用冒泡机制，将子元素事件委托给父元素执行。应用：若一个ul 有 N 个 li ，则要设置 N 个 DOM 操作，引起浏览器大量的重绘与重排，增加整体的交互就绪时间。只对这个 ul 对象进行操作，则效率大大提高。

最适用的元素 ：click，mousedown，mouseup，keydown，keyup，keypress

在使用事件时：this===target===currentTarget

用父节点的事件，代替下属的所有子节点的事件，做到委托。下面就算是有新增的节点，也会赋予相同的属性。（转换为小写是H5中必要的）

若在li 内有其他子元素，style 下的 visibility="hidden " 隐藏当前对象 visibility="visible " 显示当前对象

 

四、利用JS 修改 css 样式

1. obj.style.backgroundColor= "black";

2. obj.style.cssText = " display:block;color:White;"

3. obj.setAttribute("class", "style2"); // 推荐

4. obj.setAttribute("href","css2.css");

追加多个className ，先获取原有的类名，再加新类名，最后重新赋值。class="one two";

var oUl=document.getElementById('test');
oUl.addEventListener('click',function(ev){
    var target=ev.target || srcElement;
    while(target!=oUl){
        if(target.tagName.toLowerCase()=='LI'){
            break;
        }
        target=target.parentNode;
    }
})

捕获和冒泡前后的传入的参数要一致

function(e / evn /event ){ // 代表事件的对象，仅在使用期间存在，否则被销毁
    // 函数体
}

五、事件处理程序方式

为事件指定处理程序的方式有多种 ：

1）HTML事件处理程序 <input type="button" value="click me" οnclick="alert("hello")" />

       ①存在一个时间差，当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件（比如说调用的函数还木有被解析），就会引发错误。

       ②html和js代码耦合度太高，如果要改变事件处理程序，就要改动两个地方：html代码和javascript代码。

2）DMO0级事件处理程序 var btn=document.getElementById("myBtn");

btn.onclick=function(){alert(this.id)};

冒泡阶段

3）DOM2级事件处理程序 addEventListener(要处理的事件名，处理函数，布尔值)

removeEventListner(要处理的事件名，处理函数，布尔值)

同一元素可有多个事件处理程序 通过addEventListner添加的匿名函数无法删除。

4）IE事件处理程序 attachEvent(事件处理程序名，事件处理函数) 事件逆序触发

detachEvent(事件处理程序名，事件处理函数)

5）跨浏览器事件处理程序。 addHandler(操作的元素，事件名称，事件处理程序的函数)

removeHandler(操作的元素，事件名称，事件处理程序的函数)

 

六、定时函数

定时：

setTimeout(code，millisec) （要执行的代码，间隔的时间）

间隔

self.setInterval("调用的函数()"，间隔)

此方法可以按照指定的周期执行来执行一段程序；周期是以毫秒为单位的。

setInterval 中主要区别在于，调用函数如何表示

 

案例一：以下是正确写法

function A(){......}

function B(){

setInterval("A（）",1000，param);

}

这里加 引号和() 时，把函数A 作为一个全局搜索函数，不在函数B() 内，故函数A（）能被调用

若为A 则报错 A 未定义； 若为 A() 则只会执行一次，是setInterval 内部的错误，无法调用A（）

 

案例二：以下是正确写法

function B(){

function A(){......}

setInterval(A,1000，param);

}

与上例同理，若为A（）则setInterval 内部的错误，无法调用A（）；若是 "A（）"则寻找的作用域为外部，全局变量无法访问内部变量和函数

 

总之就是不要写成 A（），局部调用用 A，全局调用用“A（）”