js事件(十二)

一、事件三要素
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

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

时间: 2024-10-09 20:16:54

js事件(十二)的相关文章

JS事件(二)事件对象

html事件处理程序中,变量event中保存着事件对象 <button onclick="alert(ev.type)" id="btn">click</button> 1.DOM中的事件对象 无论是DOM0还是DOM2,事件处理程序中都会传入一个event对象 var btn=document.getElementById("btn"); btn.onclick=function(){ alert(1); } btn.a

【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

转载自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括,如果你的项目已经在google play 或Apple Store 等平台上架了,那么当你项目需要做一些活动或者修改前端的一些代码等那么你需要重新提交一个新版本给平台,这时候你的上架时候是个不确定的时候,具体什么时候能上架,主要跟平台有关,你再着急,也没有用的. 那么如果你的项目是使用脚本语言进行

JS 事件学习笔记(二)

在JS事件学习笔记(一)中学习了事件流.事件处理程序.事件对象以及跨浏览器应该怎么做等知识,现在我们现在来学习浏览器中主要的各种事件. 一. load事件 load事件通常是通过JavaScript代码指定,在window对象上绑定,实际上根据DOM2规定,应该在document上而非window上触发load事件,但是所有浏览器都在window对象上实现了该事件.因此以确保兼容性推荐使用该方法: 另外,在window上发生的事件也可以作为body元素的属性在html代码中添加. load事件的

js的事件机制二

js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ---用户会进行鼠标移动的操作的 键盘事件----用户会进行键盘操作的HTML元素 2.给HTML添加多个事件时,注意事件的冲突 举个例子:单击和双击 当事件的触发条件包含相同部分时候,会产生事件之间的冲突. 3.事件的阻断 当事件所监听的函数的将返回值返回给事件时 false:则会阻断当前所在HT

D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图 中国地图 我们利

js获取近十二个月

1.获取近十二个月 var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMonth()+1, 1) //获取到当前月份,设置月份 for (var i = 0; i < 12; i++) { data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1 var m = data.getMonth() + 1; m = m

QT开发(五十二)———QML语言

QT开发(五十二)---QML语言 QML是一种声明语言,用于描述程序界面.QML将用户界面分解成一块块小的元素,每一元素都由很多组件构成.QML定义了用户界面元素的外观和行为:更复杂的逻辑则可以结合JavaScript脚本实现. 一.QML基础语法 1.Import语句 QML代码中,import语句一般写在头几行,主要用途如下:     A.包含类型的全名空间     B.包含QML代码文件的目录     C.JavaScript代码文件 格式如下: import Namespace Ver

设计模式 ( 十二 ) 职责链模式(Chain of Responsibility)(对象行为)

 设计模式(十二)职责链模式(Chain of Responsibility)(对象行为型) 1.概述 你去政府部门求人办事过吗?有时候你会遇到过官员踢球推责,你的问题在我这里能解决就解决.不能解决就推卸给另外个一个部门(对象).至于究竟谁来解决问题呢?政府部门就是为了能够避免屁民的请求与官员之间耦合在一起,让多个(部门)对象都有可能接收请求,将这些(部门)对象连接成一条链,而且沿着这条链传递请求.直到有(部门)对象处理它为止. 样例1:js的事件浮升机制 样例2: 2.问题 假设有多个对象都有

如鹏网学习笔记(十二)HTML5

一.HTML5简介 HTML5是HTML语言第五次修改产生的新的HTML语言版本 改进主要包括: 增加新的HTML标签或者属性.新的CSS样式属性.新的JavaScript API等.同时删除了一些过时的和样式相关的HTML标签和属性 给网页带来了新的特性: 多媒体支持.本地存储.图形绘制和样式特效等 二.新的多媒体标签 1,<video> 用来在页面播放视频 部分属性: src 要播放的视频的地址 width 设置播放器的宽度,单位px height 设置播放器的高度,单位px contro