- 传统方式是内容在浏览器显示完毕之后再来捕捉window.onload
jquery内部原理模拟：
//模拟jQuery的加载事件行为
document.addEventListener("DOMContentLoaed", function(){alert("abcd")});
给当前应用设置一个事件DOMContentLoaded，dom树结构在内存绘制完毕就执行一些过程。
2、jquery事件绑定（bind的省略）
1、原生js的时间绑定
<input type=”text” onclick=”f1()” /> 缺点：结构和行为没有分离
document.getElementById(‘id’).onclick=f1; 结构和行为分离
document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流浏览器
.attachEvent(“onclick”,fucntion(){}); IE事件绑定
2、jquery事件绑定(input框设置点击事件click)
$(“input”).click(function(){});
$(“input”).mouseover(function(){});
在jquery里边把普通时间名字的on去掉，就是jquery对应的事件方法名字
注意：
$(“input”).click(fn); 给input框设置事件
$(“input”).click(); 触发input框的click事件执行
$(“div”).mouseover(); 触发div的鼠标移入事件执行
$(function(){
$("#result").click(function(){
console.log('click');
});
$("#result").mouseover(function(){
//触发点击事件一并执行
$(this).click();
console.log('mouseover');
});
});
鼠标移入div后会触发点击事件执行
3、jquery事件绑定（bind绑定）
上述讲的事件绑定方法有：
<input onclick=”f1()”>
document.getElementById(“#apple”).click = function(){}
document.getElementById(“#pear”).addEventListener(‘click’,function(){});
$(选择器).click(function(){});//bind的省略形式
jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法：
bind(type,[data],fn);
其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象。参数fn表示事件处理函数。
bind方法与之前事件绑定不同之处：
1． 事件绑定和取消
（1） 可以为多个不同的事件类型，绑定同一个处理过程
a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件处理});
b) 多个不同类型事件中间使用单个空格分隔。
（2）. 可以为同一个对象同时绑定多个不同类型事件
a) $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn});
b) bind(json对象)
（3）. 可以为同一个对象的同一类型事件绑定多个处理过程
a) $(“#apple”).bind(‘click’,fn1);
b) $(“#apple”).bind(‘click’,fn2);
（4）. 可以灵活取消事件绑定
a) 全部事件都取消
i. $(“#apple”).unbind();
b) 可以取消指定类型取消
i. $(“#apple”).unbind(‘click’);
c) 可以取消指定类型指定处理过程事件
i. $(“#apple”).unbind(‘click’,fn1);
d) 第三项事件取消注意：
$(“div”).bind(‘click’,function(){}); 不灵
function f1(){}
$(“div”).bind(‘click’,f1); 有效
示例：
<script>
function a(){
alert("ok, I see");
}
function b(){
alert("ok, you see");
}
function f1(){
//$("div").bind(事件类型[,事件传递参数],事件处理);
//①绑定多个同类型事件
//事件可以使用匿名函数表达式，也可以使用函数指针
$("div").bind('click',a);
$("div").bind('click',b);
//② 同时为多个事件绑定相同的处理过程
$("div").bind("click mouseover mouseout",function(){
$("#result").append('hello');
});
//③ 同时绑定不同事件
$("div").bind({
click:function(){ $("#result").append('click') },
mouseover:function(){ $("#result").append('over') },
mouseout:function(){ $("#result").append('out') }
});
}
function del(){
//全部取消
//$("div").unbind();
//取消指定事件
//$("div").unbind('mouseover');
//取消指定事件具体处理程序
$("div").unbind("click",a);
}
</script>
<body>
<div>bread and milk</div>
<input type="button" value="触发" onclick="f1()"/>
<input type="button" value="取消" onclick="del()"/>
<span id="result"></span>
</body>
2． 事件绑定参数
$(“div”).bind(‘click’,{json对象参数}, function(evt){
//参数具体使用
evt.data.对象属性名称；
});
示例：
<script>
function f1(){
//$("div").bind(事件类型[,事件传递参数],事件处理);
var name = "tom";
$("div").bind('click',{name:'tom',age:33},function(evt){
//evt就是event事件对象
alert(evt.data.name);//tom
alert(evt.data.age);//33
});
//name被复制了一份传递给nm
$("div").bind('click',{nm:name},function(evt){
//evt就是event事件对象
alert(name);
alert(evt.data.nm); //tom
});
name = "jack";
//name被复制了一份传递给nm
$("#btn").bind('click',{nm:name},function(evt){
//使用参数name
alert(name);
alert(evt.data.nm); //jack
});
}
//tom jack
//jack jack //内存中只有一个name值为jack
// div设置事件的时候，内部并没有执行函数（只是做了一个声明），name也没有被访问
// 等待事件被触发的时候，name的值已经变为jack
</script>
<body>
<div>bread and milk</div>
<input type="button" value="元素" id="btn" />
<input type="button" value="触发" onclick="f1()"/>
<span id="result"></span>
</body>
3．事件触发模拟
用户出发触发事件执行：
$(“form”).submit();
模拟用户触发事件执行trigger()：
具体用法：
trigger（type, [data]）===>只需将你的type设置为自定义的事件即可。
$(“form”).trigger(‘submit’);
$(“form”).triggerHandler(‘submit’);(没有浏览器默认动作)
triggerHandler() 只会执行具体事件，没有浏览器默认动作
例如：表单有提交事件
表单通过按钮真实被提交后发生的事情
① 执行“ok，马上出发”弹出框(提交事件的处理程序执行)
② 浏览器需要提交给下个页面(浏览器默认动作)
$(function(){
$("form").bind("submit",function(){
alert("ok, i go quickly");
});
});
function f1(){
//trigger 触发器
$("form").trigger("submit");
$("form").trigger("submit");//触发指定事件执行，同时有浏览器默认动作
//$("form").triggerHandler("submit");
$("form").triggerHandler("submit");//触发指定事件执行,不会执行浏览器默认动作
}
trigger()还可以出发自定义时间
4、阻止浏览器默认动作
浏览器默认动作：表单提交，页面重定向， <a>标签的超链接
利用提交事件可以实现表单域验证，通过页面就跳转，否则页面要停止跳转
阻止浏览器默认动作有两种方式：
① return false; //也可以阻止事件冒泡
② event.preventDefault(); //推荐使用
$(function(){
//表单提交需要验证表单域，正确就可以提交走，否则没有浏览器默认动作
$("form").bind('submit',function(evt){
//对表单域进行验证，
//用户名不正确
alert('用户名不正确');
//return false;
evt.preventDefault();//阻止浏览器默认动作
});
});
5、阻止事件冒泡
html
—>head
———>body
—————–>div
————————>input
input和div都有点击事件，由于事件冒泡作用，input框被点击触发事件之后，div的点击事件也要被触发。
有的时候根据需要不要进行事件冒泡，需要对其进行阻止
事件冒泡阻止：
① return false; 容易与“浏览器默认动作阻止“混淆
② event.stopPropagation(); 阻止事件冒泡
$(function(){
$("div").bind('click',function(){
alert("divdiv");
});
$("input").bind('click',function(evt){
alert("inputinput");
//阻止事件冒泡
//return false;
evt.stopPropagation();
});
});
6、事件委派与解除委派
事件委派与事件绑定效果一致，解除委派与时间取消类似。
$().bind(type,fn);
$().live(type,fn);
$().die(type,fn);//不带参数就是解除live事件，如果带了参数type，那会移除相应的live事件，如果同时指定了第二个参数，则只能移除指定事件的处理函数。
“事件委派“较比”事件绑定“不同之处：
使用事件委派，后增加的兄弟元素也有相同的事件被设置。
<script type="text/javascript">
$(function(){
//使用live事件委派，增加的元素也有与兄弟一样的事件
$("li").live('click',function(){
//li被点击输出自己的文本内容
alert($(this).html());
});
});
//方法声明要在加载事件外部，否则会访问不到
function f1(){
$("ul").append("<li>北京</li>");
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
<body>
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
<input type="button" value="增加" onclick="f1()" />
</body>
7、事件合并
Query有两个合成事件—-hover()和toggle(),这两个方法都是jQuery自定义的方法
1、hover()方法
语法结构为 hover(enter,leave)
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，离开时触发第二个函数。
这个函数很好理解，而且实际开发中会有很多妙用。
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
鼠标移动在每个li身上，有高亮效果
本质：每个li都有鼠标移入和移出事件，有三种实现方法
1、第一种方式：
$(“li”).each(function(){
$(this).mouseover(fn);
$(this).mouseout(fn);
});
第二种方式：
$(“li”).mouseover(fn)
$(“li”).mouseout(fn)
第三种方式：hover()
该方法就是对mouseover和mouseout两个事件封装的简便使用
$(“li“).hover(两个函数参数：移入和移出函数);
$(“li”).hover(
function(){},
function(){}
);
<script>
$(function(){
$("li").hover(
function()
{
$(this).css('background-color','lightblue');
},
function()
### 文末
如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。
同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。
**269页《前端大厂面试宝典》**
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
**前端面试题汇总**
**JavaScript**
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
