JS-dome 操作day2

2018-08-02 本文已影响0人路人_Ding

一、绑定事件的区别
1.addEventListener();
2.attachEvent();
相同点：都可以为元素绑定事件
不同点：
a.方法名不一样
b.参数的个数不一样addEventListener三个参数attachEvent二个参数
c.addEventListener谷歌火狐都支持 IE不支持 attachEvent 谷歌火狐不支持IE支持
d.this不同，addEventListenner中的this是当前的绑定对象 attachEvent中的this 是window
e.addEVentListenner中的事件类型（事件名字）没有 on attachEvent中的事件类
型（事件名字）有 on
二、为元素添加解绑事件
addEventListenner的解绑事件：
//解绑事件的时候，需要在绑定事件的时候用命名函数
对象.removeEventListenner("click",f1,false);
attachEvent的解绑事件：
对象.detachEvent("onclick",f1);

注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
2.解绑事件
对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeEventListener("没有on的事件类型",函数名字,false);
3.解绑事件
对象.attachEvent("on事件类型",命名函数);---绑定事件
对象.detachEvent("on事件类型",函数名字);
三、事件冒泡
事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
事件冒泡,阻止事件冒泡,
如何阻止事件冒泡: window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

四、事件阶段
//事件有三个阶段:
/*
*
* 1.事件捕获阶段 :从外向内
* 2.事件目标阶段 :最开始选择的那个
* 3.事件冒泡阶段 : 从里向外
*
* 为元素绑定事件
* addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
* 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
* window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
* window.event就是一个对象,是IE中的标准
* e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
* window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
* 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
* addEventListener中第三个参数是控制事件阶段的
* 事件的阶段有三个:
* 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
* 如果这个属性的值是:
* 1---->捕获阶段
* 2---->目标阶段
* 3---->冒泡
* 一般默认都是冒泡阶段,很少用捕获阶段
* 冒泡阶段:从里向外
* 捕获阶段:从外向内
*

五、BOM
JavaScript分三个部分:
1. ECMAScript标准---基本语法
2. DOM--->Document Object Model 文档对象模型,操作页面元素的
3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的

 浏览器中有个顶级对象:window----皇上
 页面中顶级对象:document-----总管太监
 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的

 变量是window的

六、加载事件
很重要：//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件

onload=function () {
  document.getElementById("btn").onclick=function () {
    alert("您好");
  };
};

//扩展的事件---页面关闭后才触发的事件

// window.onunload=function () {
//
// };
//扩展事件---页面关闭之前触发的
// window.onbeforeunload=function () {
// alert("哈哈");
// };
七、location对象
//location对象
//console.log(window.location);

// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);
//location.href="http://www.jd.com";//属性----------------->必须记住

八、navigator对象
通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);
九、定时器
//定时器
//参数1:函数
//参数2:时间---毫秒---1000毫秒--1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
//返回值就是定时器的id值
var timeId = setInterval(function () {
alert("hello");//断言
}, 1000);
document.getElementById("btn").onclick = function () {
//点击按钮,停止定时器
//参数:要清理的定时的id的值
window.clearInterval(timeId);
};
</script>

JS-dome 操作day2

猜你喜欢

热点阅读