js的事件
来源:互联网 发布:mac mobi 制作软件 编辑:程序博客网 时间:2024/06/05 06:55
本人之前认为事件就是一些点击移入等事情触发的事情.
JavaScript使我们可以创建动态的页面,事件是可以被JavaScript监测到的.事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行
IE的事件流是事件冒泡,Netscape Communicator的事件流是事件捕获
事件的所有属性属性 当以下情况发生时,出现此事件 FF N IEonabort 图像加载被中断 1 3 4onblur 元素失去焦点 1 2 3onchange 用户改变域的内容 1 2 3onclick 鼠标点击某个对象 1 2 3ondblclick 鼠标双击某个对象 1 4 4onerror 当加载文档或图像时发生某个错误 1 3 4onfocus 元素获得焦点 1 2 3onkeydown 某个键盘的键被按下 1 4 3onkeypress 某个键盘的键被按下或按住 1 4 3onkeyup 某个键盘的键被松开 1 4 3onload 某个页面或图像被完成加载 1 2 3onmousedown 某个鼠标按键被按下 1 4 4onmousemove 鼠标被移动 1 6 3onmouseout 鼠标从某元素移开 1 4 4onmouseover 鼠标被移到某元素之上 1 2 3onmouseup 某个鼠标按键被松开 1 4 4onreset 重置按钮被点击 1 3 4onresize 窗口或框架被调整尺寸 1 4 4onselect 文本被选定 1 2 3onsubmit 提交按钮被点击 1 2 3onunload 用户退出页面 1 2 3
1.事件冒泡
IE的事件流叫做事件冒泡,既事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点
事件冒泡触发顺序
div —> body —>html —>document
现在所有的浏览器都支持事件冒泡,有些会跳过HTML
2.事件捕获
另一个事件流叫做事件捕获.事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.事件捕获的用意是在于在事件达到预定目标之前捕获他.触发事件
document —> html —> body —> div
在事件捕获过程中,document对象首先接收到click事件,然后事件沿DOM树依次向下,一直传播到事件的实际目标.
事件处理程序都带有 ‘on’
一.HTML事件处理程序
可以直接在HTML事件里面书写事件
<input type="button" value="Click me" onclick="alert('hello world')">
也可以在script里面去书写事件
<input type="button" value="Click me" onclick="showMessage()"><script>function showMessage() { alert('hello world')}</script>
这个函数是一个独立的script 元素中定义的,当然也可以被包含在另一个外部文件中,事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码,这样指定事件处理程序具有一些独到之处,这个函数中有一个局部变量event,也就是事件对象
<input type="button" value="Click me" onclick="alert(event.type)"><!--输出click-->
<input type="button" value="Click me" onclick="alert(this.value)"><!--输出Click me-->
<input type="button" value="Click me" onclick="alert(value)">
动态创建的函数,可以扩展作用域在函数内部,可以像访问局部变量一样访问document及本元素的成员.
function onclick() { with (this.form){ with (this){ } }}
二.DOM 0级事件处理程序
DOM0级方法指定的事件处理程序被认为是元素的方法,所以事件处理是在元素作用域中运行
<p id="myBtn">123</p> 输出123 输出myBtn
var btn = document.getElementById('myBtn');btn.onclick = function () { alert(this.innerText); alert(this.id)}也可以删除DOM 0级事件,将这个值设置为null就可以btn.onclick = null;
三.DOM 2级事件处理程
DOM 2级事件 定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()
所有的DOM节点都包括这两个方法,并且都接受三个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值.这个布尔值如果是true.表示在捕获阶段调用事件处理程序,如果是false,表示在冒泡阶段调用事件处理程序.
例子:
<p id="myBtn">123</p><script>输出的是myBtn,采用的是冒泡事件处理程序var btn = document.getElementById('myBtn');btn.addEventListener('click',function () { alert(this.id);},false)</script>
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加出炉
程序时使用的参数相同.这也意味着通过addEventListen()添加的匿名函数将无法移除
<script>添加的二级事件var btn = document.getElementById('myBtn');btn.addEventListener('click',function () { alert(this.id);},false)
移除的二级事件(但是没有用,匿名函数移除不了) 执行顺序 先显示this.id 后显示 hello world
btn.removeEventListener('click',function () { alert(this.id);},false);btn.addEventListener('click',function () { alert('hello world');},false)
这样书写的可以移除 添加二级事件
var hander = function () { alert(this.id);};btn.addEventListener('click',hander,false);移除二级事件btn.removeEventListener('click',hander,false);</script>
IE事件处理程序
IE实现DOM中类似的两个方法:attachEvent()和detachEvent().这两个方法接受相同的两个参数
attachEvent()添加事件 这个执行顺序是先执行hello world 后执行 this.id
btn.attachEvent('onclick',function () { alert(this.id)})btn.attachEvent('onclick',function () { alert('hello world')})
注意:attachEvent()的第一个参数是’onclick’,而非DOM的addEventener()方法中的’click’
在IE中使用attachEvent()与使用DOM0级方法的主要区别在于处理程序的作用域.在使用DOM0级方法情况下事件处理,程序会在其所属元素的作用域内运行;
在attachEvent()方法中,事件处理程序会在全局作用域中运行,所以this等于window
事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素.事件类型.和与特定事件相关的信息.鼠标操作导致的事件对象中,会包含鼠标位置信息,而键盘操作导致的事件对象中会包含与按下键有关的信息.所有的浏览器都支持event对象
DOM中的事件对象
兼容DOM事件的浏览器中都会将event对象传入到事件处理程序中.无论是DOM0级事件还是DOM2级事件,都会传入event对象.
event,type事件类型
btn.onclick = function (event) { alert(event.type)//输出的是'clcik'};btn.addEventListener('click',function (event) { alert(event.type)//输出的是'click'},false)target是目标实际触发者,currentTarget和target值相同btn.onclick = function (event) { alert(event.currentTarget===this); //true alert(event.target===this); //true}
阻止特定事件的默认行为
event.preventDefault()
阻止事件冒泡和捕获
event.stopPropagation()
IE中的事件对象与DOM中event对象不同写为window.event 阻止默认程序的是 returnValue
写为Window.event.returnValue = false;
阻止默认程序 window.event.cancelBubble = true;
load事件,当页面加载完全后会触发window上面的load事件.有两种定义onload事件处理程序的方式.第一种方式:EventUtil第二中是在<bodyonload="alert('Loaded')">unload事件,与load事件对象是卸载之后发生的事件resize事件,当浏览器改变时会触发resize事件scroll事件,在页面中元素改变的时候会触发,例如滚动滑动条.
- js的事件模型
- js事件的学习心得
- JS 事件的获取
- js的事件
- js事件的绑定
- js的触发事件
- js的按键事件
- js的自定义事件
- Node.js的事件
- js的onclick事件
- JS的onerror事件
- JS的事件处理
- JS的对象,事件
- js的粘贴事件
- js的事件绑定
- JS的冒泡事件
- js的事件
- js selected的事件
- js中拼接的html代码中的onclick事件解析错误
- 使用 jsoup 对 HTML 文档进行解析和操作
- CentOS 6.9中安装Docker的一些问题
- VS2013+uCOSII V2.91(uCOSII移植)
- retrofit+RxJava+okhttp简便封装实现网络请求(详解)
- js的事件
- 09. JSP EL表达式语言
- android elf解析Elf_Dyn标识符号
- Android学习--位置信息经纬度获取+动态获取权限
- 箭头函数和普通函数的区别
- Mysql三范式
- python——执行带有%的sql执行报错解决方法
- 2017 Multi-University Training Contest
- jQuery中的.addClass()用法