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

事件的绑定方式

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.event
  var target=e.target||e.srcElement
  console.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.event
 var target=e.target||e.srcElement
 alert(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.event
  e.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()