JavaScript学习DAY12

DAY12

一、绑定事件的方式

1、事件属性 ：

​ 把事件写在标签的属性里面

<input type="button" onclick="alertMessage()" value="按钮"/>

2、事件绑定

dv.onclick = function(){
	conloge.log('我是第一个事件')
}
dv.onclick = function(){
	conloge.log('我是第二个事件')
}
//当你点击的时候，只会执行第二个，第一个就没有了

3、事件监听：

1、addEventListener

添加事件监听 事件监听可以有多个 IE9+ 支持 绑定相同的事件，两个都会存在

​ 第一个参数是事件类型
​ 第二个参数是事件处理函数

 dv.addEventListener('click', function(){
            console.log(123)
        })

dv.addEventListener('click', function(){
        	console.log(456)
    	})
 dv.addEventListener ? console.log('123') : console.log('456')
//当你点击的时候，两个函数都会执行，并且按照注册顺序执行

2、attachEvent

​ 第一个参数是 on + 事件类型
​ 第二个参数 是事件处理函数

 dv.attachEvent('onclick', function(){
            console.log(123)
        })
dv.attachEvent('onclick', function(){
            console.log(456)
        })

二、事件传播机制

​ 事件传播： 事件会传播
​ 传播方向: 由内向外 -> 事件冒泡
​ 由外向内 -> 事件捕获

​ 事件由外向内传，
​ 事件监听写法
​ 语法: 元素.addEventListener(‘事件类型’,事件处理函数, 冒泡|捕获)
​ 冒泡|捕获 => false|true
​ 默认冒泡
​ 事件捕获: true
​ 事件冒泡： false(默认)

 div.addEventListener('click',function(){
            alert('事件a')
        },true)

三、绑定事件

绑定相同的事件，只会存在最后一个事件

​ @param {ele} 要绑定事件的元素
​ @param {type} 事件类型
​ @param {fn} 事件处理函数

        on(dv,'click', function(){
            console.log(123)
        })
        on(dv,'onclick', function(){
            console.log(456)
        })
        
    function on(ele, type, fn) {
        // 先判断浏览器是否支持
        if (ele.addEventListener) {
            // 支持
            // 判断传的事件类型有没有带 on 
            if(type.indexOf('on') === 0){
                type = type.slice(2)
            }
            ele.addEventListener(type,fn)
        }else{
            // 不支持
            // 判断传的事件类型有没有带 on 
            if(type.indexOf('on') !== 0){
                type = 'on' + type
            }
            ele.attachEvent(type,fn)
        }
    }

四、解除函数绑定事件

  dv.attachEvent('onclick', fun)
        // detachEvent('on'+事件类型,事件处理函数) 
        // 解绑的事件处理函数必须和绑定的时候是同一个事件处理函数

  btn.onclick = function () {
        dv.detachEvent('onclick', fun)
    }

    function fun() {
        console.log(123)
   }

五、获取元素函数封装

获取元素
@params {selector} 选择器
@params {context} 元素范围
@return 获取到的元素或者元素集合

    function my$(selector,context){
        // 给 context 一个默认值
        context = context || document
        // 判断是 # 还是 . 开头还是其他的
        if(selector.indexOf('#') === 0){
            // 获取到元素 返回出去
            return document.getElementById(selector.slice(1))
        }else if(selector.indexOf('.') === 0){
            return context.getElementsByClassName(selector.slice(1))
        }else{
            // 如果都不是 我就返回一个元素集合
            return context.querySelectorAll(selector)
        }
    }

六、阻止冒泡

e.stopPropagation() 阻止冒泡 IE9 及以上

e.cancelBubble = true IE8及以下

兼容性写法
            if(e.stopPropagation){
                    e.stopPropagation() // 阻止事件传播 标准浏览器
            }else{
                e.cancelBubble = true //IE 低版本
            }

七、阻止默认事件

阻止默认行为
           默认行为: 表单提交  
                      当执行完表单提交事件submit后 默认会执行 action动作
                      onsubmit -> action
                    a标签
                      <a href="http://www.baidu.com" onclick="alert()">百度</a>
                      onclick -> href跳转

阻止默认事件方式
1、return false //后面的代码不再执行
2、e.preventDefault() //非IE浏览器
3、e.returnValue = false // IE 浏览器

	<form action="http://www.baidu.com">
        <input type="submit" value="确定">
    </form>
    <script>
        //onsubmit事件 是那个元素的 form 表单
        var formEle = document.querySelector('form')
        formEle.addEventListener('submit',function(e){
            e = e || window.event //事件对象
            alert('表单提交')
            //阻止默认行为
            e.preventDefault()   // 非IE浏览器
            // e.returnValue = false // IE 浏览器
        })
    </script>

八、事件委托

问题：

​ + 问题描述：传统的绑定事件的方法，绑定的相同的事件，使用for循环实际上是绑定很多次，对于浏览器

​ 的性能有很大的消耗的。后面新创建的标记，事件是不会给你绑定上的

​ + 针对于这种问题有人提出，要是有一种方法只绑定一次事件，其他的元素都绑定了，该多好？

​ + 解决方案：使用事件委派 — 自己做的事情，让别人去做

​ + 事件委托（委派）指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，

​ 会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。

一般用在页面上有动态追加进去的元素 绑定事件

事件委派是给父元素绑定事件 然后由父元素委派给子元素

九、获取方式:

​ 事件对象.target
​ 兼容IE
​ 事件对象.srcElement

​ 兼容性写法:
​ var target = e.target || e.srcElement

<ul>
        <li class="l1">元素一</li>
        <li class="l2">元素二</li>
        <li class="l3">元素三</li>
    </ul>
<script>
    	// 给所有li列表项设置点击事件
        // 1. 获取所有li元素， 分别给每个li设置点击事件
        var liEles = document.querySelectorAll('li')
        // 2. 循环遍历  用for循环
        for(var i = 0; i < liEles.length; i++){
            liEles[i].addEventListener('click',function(e){
                e = e || window.event // 事件对象
                var target = e.target || e.srcElement // 事件目标对象
                console.log(target)
                console.log(("收包裹")
            })
        }
                                       
        //事件委托
        //target  目标对象
      	//event   事件对象   =>   target是事件对象的一个属性
        //event.target  =>  目标对象
        var ulEle = document.querySelector('ul')
        ulEle.addEventListener('click',function(e){
            e = e || window.event // 事件对象
            var target = e.target || e.srcElement // 事件目标对象
            var classValue = target.getAttribute('class')
            if(classValue == 'l1'){
                console.log("收元素一 的包裹")
            }else if( classValue == 'l2'){
                console.log("收元素二 的包裹")
            }else if( classValue == 'l3'){
                console.log("收元素三 的包裹")
            }    
        })
    </script>

十、获取元素

获取元素
@params {selector} 选择器
@params {context} 元素范围
@return 获取到的元素或者元素集合

1、window.getComputedStyle(要获取样式的元素).你要获取的样式属性 IE9 及以上
2、元素.currentStyle.你要获取的样式属性 IE8 及以下

function my$(selector,context){
    context = context || document
    if(selector.indexOf('#') === 0){
        return document.getElementById(selector.slice(1))
    }else if(selector.indexOf('.') === 0){
        return context.getElementsByClassName(selector.slice(1))
    }else{
        return context.querySelectorAll(selector)
    }
}

/*
      兼容处理：
      \+ 事件
      \+ 函数（把函数作为参数给函数使用）
      \+ 需要给绑定的元素
    */
    function addEvent(ele, l, cb){
      if(ele.addEventListener){
        ele.addEventListener(l, cb, false);
      }else{
        //因为在IE低版本的浏览器下是没有事件捕获的
        ele.attachEvent('on'+l, cb);
      }
    }
    addEvent(btn, 'click', function(){
      alert(1);
    });
    addEvent(btn, 'click', function(){
      alert(2);
    });

十一、回调函数：

​ + 回调函数（callback、cb）

​ + 概念：如果把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指的函数时，我们就说这是回调函数。

​ + 理解：把一个函数作为参数给另一个函数使用，把这种情况称之为回调函数