事件的机制 内存泄漏 事件的处理 异步装载回调 异步编程的实现 (知识点)

1.jquery的四种监听事件的方式

bind , live , delegate , on : 对应的解除监听的函数是 unbind , die , undelegate , off;

type: 事件类型,如click,change,mouseover
data: 传入监听函数的参数,通过event.data取到
function: 监听函数,可传入event

bind方法:把监听器绑定到目标元素上,有一个绑定一个,不能动态的绑定;

live方法:把监听器绑定到document上,事件的冒泡向上查找慢,元素多的时候回混乱;

delegate方法:把监听器绑定到父元素上,event.currentTarget显示当前捕获到的事件元素是父元素,
不但可以利用事件的委托,还可以选择委托的对象
on方法:

$('#olist(父元素)').on('click','li(子元素)',function (){
            // alert(22222)(执行的回调函数)
            alert(this.innerHTML)
        })

this:是原生的写法,只能用原生的方法,转换为jq对象 $(this)$(this): 是jq里面的,可以使用jq里面封装好的方法

2.内存泄漏 (不在用到的内存,没有及时释放)

在函数里面定义的变量没有用var,是全局函数;(不可回收)
闭包里面的变量

测试 chrome :打开开发者工具,选择 Timeline (时间轴)面板 –> 在顶部的capture(捕获)里面勾选 Memory(存储器) –> 点击左上角的录制按钮 –> 在页面上各种操作 –> 一段时间后 (平稳,没有内存泄漏,反之内存泄漏;IE测不出来,火狐在性能哪里,不会分析)

数据的分析: js Head 2.0-2.2MB 到 2.1-2.4MB
nodes 43- 183 到 67 - 309

3.事件机制

事件流:从页面中接收事件的顺序,有冒泡和捕获流

4.事件的处理

DOM0级事件:

对于同一个dom节点而言,只能注册一个,后面注册的 同种事件会覆盖之前注册的;
利用这个原理我们可以解除事件,ben.onclick = null; this就是绑定事件的那个元素;

DOM2级事件:

支持同一dom元素注册多个同种事件,事件的发生顺序按照添加的顺序依次触发(IE是相反);
DOM2级事件是通过addEventListener 和 removeEventListener 管理;

addEventListener 和 removeListener两个方法都是接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示事件冒泡阶段调用事件处理程序;

一般建议再冒泡阶段使用,特殊情况才用捕获阶段;
通过addEventListener()添加的事件程序只能用removeEventListener()来移除,并且移除的时候传入的参数必须与添加传入的参数一样;

IE事件:

IE用了attachEvent() 和 detachEvent(),接收两个参数,事件名称和事件处理程序,通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,为了兼容更多的浏览器最好将事件添加到事件冒泡阶段IE8及以前只支持事件的冒泡;

事件对象中的this, target , currentTarget(event.target不支持IE浏览器,应该用event.srcElement;还有IE中通过atachment添加的事件是运行在全局作用域中的, this === window;

event.stopPropagation()可以组织事件的传播,但它阻止不了绑定在该元素上的其他函数的执行;那么第二个事件也会被阻止,它不仅阻止事件的传播还阻止后续事件的执行;

initEvent() :初始化新创建的event对象的属性
preventDefault(): 通知浏览器不要执行与事件关联的默认动作
stopPropagation(): 不再派发事件

5.异步装载回调

工具会自动识别data-main属性值,并加载对应的js文件,在main.js可以加载更多模块来实现复杂的业务;
回调就是B函数被作为参数传递到函数A里,在A函数执行完后再执行B;

6.异步编程的实现: 回调函数 和 事件的监听;

 function f1 (callback) {
setTimeout(function () {
callback();
    },1000);
}
f1(f2);
f3();

上面的写法是利用setTimeout 把 f1 的逻辑包括起来,实现js中的异步编程;f1异步了,不再堵塞f3的执行,js是单线程的,所谓的异步也是伪异步,并不是开了多线程的异步;setTimeout 方法的原理是根据后面定时的时间,过了这个时间后,将f1加入任务线,仅仅是加入任务线,并不是放进去执行,而是根据任务栈里的任务数量来确定;

通过事件的触发处理逻辑:
f1 添加一个事件,事件触发f2函数;

function f1() {
 setTimeout(function(){
 f1.trigger('click');
   })
 }
f1.on('click',f2);

这两种方式是js 中的伪异步 ,而ajax 的异步是底层多线程函数的异步;