事件的绑定方式

DOM0级事件绑定：

1.事件属性方式：<button οnclick="alter()"></button>

2.赋值式：btn.οnclick=function()

DOM2级事件绑定方式：事件监听方式

ele.addEventListener('事件类型'，事件处理函数function(){})

btn.addEventListener('click',function(){alter('事件监听')})

兼容性写法：ele.attachEvent('事件类型(onclick)'，function(){})

三种方式的区别：

1.事件赋值与事件监听同事件属性相比，实现了结构与行为分离

2.事件赋值与事件监听：

事件监听方式后面的事件不会覆盖前面的事件（事件源和事件类型相同）

事件赋值只能绑定一个，后面的会覆盖前面的

事件解绑：

1.赋值式：btn.οnclick=null

2.解绑监听事件：btn.removeEventListener('解绑类型'，fun())

需要单独把事件处理函数弄出来

function fun1(){alert('事件监听1')}
function fun2(){alert('事件监听2')}
btn.addEventListener('click',fun1)
btn.addEventListener('click',fun2)
//解绑
btn.addEventListeber('click',function()){
alert('事件监听2')}

事件执行方式：

1.事件目标对象：target(点中的元素)，兼容性写法：e.srcElement

div.addEventListener('click',function(e){e=e||window.eventvar target=e.target||e.srcElementconsole.log(target)})

2.事件传播：

1>如果嵌套的元素绑定相同的事件，事件会传播

2>传播方向：

事件冒泡传播方向：由内往外传（默认传播行为）从事件目标对象开始，传到window对象结束

由外往内传：事件捕获

window对象----》事件目标对象

事件监听的第三个参数表示传播方向

div.addEventListener('click',function(){},ture)//默认false冒泡，ture为捕获

3.事件处理的三个阶段：事件目标，事件冒泡，事件捕获

4.阻止事件传播：e.stopPropagation()

pEle.addEventListener('click',function(){e.stopPropagation()})

兼容写法：e.stopPropagation?e.stopPropagation():e.cancelBubble=true

事件委托（事件代理）

使用场景，要给多个元素循环绑定事件时利用事件冒泡实现

<ul><li>李同学</li><li>王同学</li><li>刘同学</li>
<ul>
function fun(){
var ulEle=document.querySelector('ul')
ulEle.addEventListener('click',function(e){e=e||window.eventvar target=e.target||e.srcElementalert(target.innerHtml+'代收成功')})

事件委托的优点：

1.减少事件绑定数量

2.对后来动态创建的元素仍然有效

3.解决动态添加的元素节点无法绑定事件的问题

事件委托的缺点：

1.基于冒泡，对于不支持冒泡的事件不能使用，如焦点事件

2.层级过多，冒泡过程中，可能会被某层阻止掉

默认行为：

1.a标签默认行为href执行链接跳转

2.form表单action默认行为

3.右键事件默认行为

阻止：e.preventDefault()

var aEle=document.querySelector('a')
aEle.addEventListener('click',function(e){e=e||window.evente.preventDefault()})

函数：

1.自调用函数：函数定义和调用写在一块

语法：(function(){

函数体})（）

作用：封装代码，封装私有变量，独立于全局变量

(function(){alert('自调用函数')var num=100
})()

arguments对象：函数所有实参的集合，函数体中直接使用

作用：函数可变参数

function fun(a,b,c){//arguments类数组形式存在console.log(arguments)    //表示所有实参的集合for(var i=0;i<arguments.length;i++){console.log(arguments[i])} }

//计算任意数的总和
function sum(){
var s=0
for(var i=0;i<arguments.length;i++){s=s+arguments[i]
}
return s
}var s=sum(10,20,30,40)
alert(s)

this关键字：

1.this表示当前对象

2.在同场景下this表示不同的对象

事件处理函数中的this-->事件源

3.普通函数中的this：this--->window对象

4.定时器中的this：this--->window对象

5.自调用函数中的this：this--->window对象

6.对象方法中的this:调用该方法引用变量指向对象

var obj = {name:'jack',say: function(){console.log(this.name + '说话, say方法调用');console.log('对象Object方法中this -> ',this)}}obj.say()

学习js的第十三天【事件的绑定方式，执行方式】相关推荐

js元素事件的绑定与解绑，绑定事件的区别
一.元素事件的绑定第一种方式 /** * @param {*} element 元素 * @param {*} type 事件类型* @param {*} fn 事件处理函数 */ element[ ...
JavaScript学习（三十三）—事件对象常用的属性和方法
JavaScript学习(三十三)-事件对象常用的属性和方法 (一).type属性 <style>#box {width: 200px;height:
JS高级程序设计读书笔记（第十三章事件）
第十三章事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代 ...
深入学习JS：任务队列和事件循环
目录一.问题二.任务队列与事件循环 2.1 同步任务与异步任务 2.2 任务队列 2.3 事件循环(event loop) 三.解决 3.1 解决同时输出 3.2 解决全输出10问题一.问题在 ...
前端学习--js.2
写一个通用的事件侦听器函数 markyun.Event = { //页面加载完成后 readyEvent :function(fn) { if(fn==null) { fn=document; } v ...
JS 监控页面刷新,关闭事件的方法（转载）
JS 监控页面刷新,关闭事件的方法(转载) 已有 149 次阅读 2011-8-30 11:37 |个人分类:web|系统分类:创意设计|关键词:JS,刷新,关闭都是为了学习-- onbefore ...
OpenCV学习笔记（三十一）——让demo在他人电脑跑起来 OpenCV学习笔记（三十二）——制作静态库的demo，没有dll也能hold住 OpenCV学习笔记（三十三）——用haar特征训练自己
OpenCV学习笔记(三十一)--让demo在他人电脑跑起来这一节的内容感觉比较土鳖.这从来就是一个老生常谈的问题.学MFC的时候就知道这个事情了,那时候记得老师强调多次,如果写的demo想在人家那 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
js第13天（事件绑定方式）
目录前言 1.DOM0级方式 2.DOM2级方式 3.绑定方式的优缺点 4.事件解绑二.事件的执行机制 1.事件对象 2.事件目标对象三.事件传播四.事件委托 1)原理:事件冒泡实现 2)事件 ...

学习js的第十三天【事件的绑定方式，执行方式】