码迷,mamicode.com
首页 > Web开发 > 详细

js事件(十二)

时间:2019-07-22 16:45:41      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:方法   rem   cancel   open   display   lap   兼容性   span   浏览器   

一、事件三要素
1、事件目标【谁触发的该事件(引起该事件触发的源头:target)】
2、事件处理程序【处理相应事件的函数】
3、事件对象【触发事件产生的携带事件信息的对象】

二、事件流【从页面中接受事件的顺序】
1、事件捕获流    相同事件从外到内依次执行
2、事件冒泡流    相同事件从内到外依次执行
3、DOM事件流    先事件捕获,再处理目标,再冒泡

三、事件处理程序
1.HTML事件处理程序【HTML特性来指定
eg:

    <div onclick="test()"></div>
    <script type="text/javascript">
        function test(){};
    </script>

缺点:
1)时差问题:可能在加载页面是无意间就触发相应的事件处理程序。
2)兼容性问题:存在浏览器兼容性问题。
3)代码划分问题:HTML与JavaScript代码紧密耦合。
    
2.DOM0级的事件处理程序【相应元素指定,this指向事件绑定元素】(特点是简单,跨浏览器。)
eg:

    var div = document.getElementsByTagName("div")[0];
    div.onclick = function(){};
    div.onclick = null;        //事件解除绑定    

说明:
可以同一元素添加多个相同类型的事件,但后面的相同的事件会覆盖前面的事件【同一元素相同事件只会执行一次

 

3.DOM2级事件处理程序

    function handle(){};    //事件处理函数

a、非ie8以下浏览器    【不要对事件使用 "on" 前缀    eg:请使用 "click" 代替 "onclick"
addEventListener(事件名,事件处理函数,布尔值)    事件绑定
eg:

    div.addEventListener(‘click‘,handle,false);

removeEventListener(事件名,事件处理函数,布尔值)    事件解绑
eg:

    div.removeEventListener(‘click‘,handle,false);

函数说明:
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用事件处理程序(默认为:false)
可以同一元素添加多个相同类型的事件,并且按照她们添加的的顺序依次触发执行
添加事件时如果使用匿名函数将无法删除

b、ie8及以下浏览器【事件名:要添加on在前面
attachEvent(事件名,事件处理函数,布尔值)    事件绑定
eg:

    div.attachEvent(‘onclick‘,handle,false);

detachEvent(事件名,事件处理函数)    事件解绑
eg:

    div.detachEvent(‘onclick‘,handle,false);  

函数说明:
布尔值:true在捕获阶段调用事件处理程序;false在冒泡阶段调用事件处理程序(默认为:false)
如果同一节点同一事件绑定多个事件处理程序,逆序执行

四、事件对象里面的属性均为只读
1、DOM中的事件对象【event
currentTarget    [Element]    事件处理程序当前正在处理事件的那个元素【绑定该事件处理程序的元素
target    [Element]    事件真正目标【引发事件发生的源头
preventDefault()    [Function]    取消事件的默认行为
stopPropagation()    [Function]    取消事件的进一步捕获或者冒泡
bubbles  [Boolean]    事件是否冒泡
cancelable    [Boolean]    是否可取消事件默认行为
说明:
a、在事件处理程序内部,对象this===currentTarget值,而target则只包含事件的实际目标。
b、如果直接将事件处理程序指定给了目标元素,this,currentTarget,target包含相同的值。
c、兼容DOM的浏览器默认会将event对象传入到事件处理函数中

2、ie(COM)中的事件对象【window.event】opera也是使用window.event
type  [String]        被触发的事件 的类型
srcEvent  [Element]        事件的目标 【类似target
returnValue  [Boolean]        取消时间默认行为,值为false阻止【类似preventDefault()
cancelBubble  [Boolean]        是否取消事件冒泡,值为true取消冒泡【类似stopPropagation()

3、js中兼容性处理问题
对相关兼容性问题封装为对象的相关方法
eg:

技术图片
    //事件兼容性对象eventUtil
    var eventUtil = {
        // 1.事件的绑定
        bind:function(el,type,handle){
            if (el.addEventListener) {
                //非ie8及以下浏览器
                el.addEventListener(type,handle);
            }else if(el.attachEvent){
                //ie8及以下浏览器
                el.attachEvent(‘on‘+type,handle);
            }else{
                el.[‘on‘+type] = handle;
            }
        },
        // 2.事件的解绑
        unbind:function(el,type,handle){
            if (el.removeEventListener) {
                //非ie8及以下浏览器
                el.removeEventListener(type,handle);
            }else if(el.detachEvent){
                //ie8及以下浏览器
                el.detachEvent(‘on‘+type,handle);
            }else{
                el.[‘on‘+type] = null;
            }
        },
        // 3.事件对象
        getEvent:function(event){
            //ie及opera使用window.event;其他基本使用event
            return event?event:window.event;
        },
        // 4.事件目标
        getTarget:function(event){
            //ie使用srcElement;DOM中事件对象使用target
            return event.target?event.target:event.srcElement;
        },
        // 5.事件冒泡
        stopProp:function(event){
            if(event.stopPropagation){
                //DOM事件对象下使用
                event.stopPropagation();
            }else{
                //ie下使用cancelBubble
                event.cancelBubble = true;
            }
        },
        // 6.事件默认
        preventDef:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }
    };
封装对象 Code

 

js事件(十二)

标签:方法   rem   cancel   open   display   lap   兼容性   span   浏览器   

原文地址:https://www.cnblogs.com/nzcblogs/p/11226599.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!