事件的冒泡:
- 指事件的向上传导,当后代元素被绑定的某事件被触发,其祖先元素的相同事件(如同为点击事件)都会被触发(按级一层层往上)
- 可以通过事件对象来取消冒泡,代码如下
var s1 = document.getElementById("s1");
s1.onclick = function(event){
//event这么写是为了各种浏览器兼容
event = evevt || window.event;
alert("我是后代元素的单击响应事件");
//取消事件冒泡
event.cancelBubble = true;
};
事件的委派
- 将事件统一绑定在祖先元素上,使得当后代元素上的事件触发时,冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
- 事件委派利用了冒泡原理,通过委派可以减少事件绑定的次数,提高程序的性能
<script type="text/javascript">
window.onload = function(){
var ul = document.getElementById("ul");
//点击按钮之后添加新的超链接
var btn01 = document.getElementById('btn01');
btn01.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新超链接</a>";
//将li添加到ul里面
ul.appendChild(li)
}
/*
* 事件的委派:
* 降事件绑定在祖先元素上,利用冒泡原理,使得其通过祖先元素上面绑定的函数来响应
*/
ul.onclick = function(event){
event = event || window.event;
/*
* target是event触发事件的对象
*/
if (event.target.className == "link"){
alert(" 我其实是绑定在ul的点击事件")
}
}
}
</script>
<body>
<button id='btn01'>添加超链接</button>
<ul id="ul" style="background-color: #bfa;">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
事件的绑定
- btn.onclick = function(){} 的绑定方式只可绑定一个函数,多次绑定会覆盖,只有最后一次绑定有效
- btn.addEventListener() 可以为元素某事件绑定多个响应函数
/*
*参数:·事件的字符串(没有on)
- ·回调函数,事件出发时调用的函数
- ·是否在捕获阶段触发事件,布尔值,默认false,一般默认
- 多次绑定,将会按照事件的绑定顺序执行响应函数
- 这个方法不支持IE8及以下的浏览器
*/
btn01.addEventListener("click",function(){
alert(1);
},false);
/*
- IE8及一下可以使用attachEvent()
- 参数:1.事件的字符串,要on
- 2.回调函数
- 和前面的方法不同的是,它执行响应函数的的顺序与绑定顺序相反
*/
btn.attachEvent("onclick", function(){
alert(1);
});
事件的传播
w3c规定降事件的传播分为三个阶段:
- 捕获阶段:在捕获阶段时从最外层的祖先元素,向目标元素进行事件捕获,但默认此时不会触发事件
- 目标阶段:事件捕获到目标元素,捕获结束开始在目标元素触发事件
- 冒泡阶段:事件从目标元素向它的祖先元素传递,以此触发路径元素上的事件
如果希望在捕获阶段触发事件,可以降addEventListener()的第三个参数设置为true
注:在IE8及以下浏览器没有捕获阶段
浏览器默认行为
存在一些浏览器默认行为,可在函数里return false取消
BOM
BOM为浏览器对象,它可以使我们可以通过js操作浏览器。BOM重为我们提供了一组对象,用来操作浏览器: - Window:代表的是整个浏览器的窗口,同时也是网页重的全局对象
- Navigator:代表的是当前浏览器的信息,通过该对象可以识别不同的浏览器
- Location:代表当前浏览器的地址信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
- History:代表浏览器的历史记录,由于隐私原因,不能通过他访问具体历史记录,只能通过它前进或回退页面
定时器
setInterval():- window对象的函数,定时调用:可以将一个函数每隔一段时间执行一次
- 参数:
- 回调函数,指定每隔一段时间将要执行的函数
- 每次调用间隔的时间,单位是毫秒
- 返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
- clearInterval()可以关闭定时器。它可以接收任意参数,如果参数是一个有效的定时器标识,则停止对应的定时器;如果参数不是一个有效的标识,则什么也不做
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
//关闭定时器
clearInterval(timer);
}
}, 1000);
setTimeout():
- 延时调用:延时调用一个函数不马上执行,而是隔一段时间之后再执行,而且只会执行一次(定时调用会执行多次)
- 同样,clearTimeout()可以关闭一个延时调用
JSON
JavaScript Object Notation JS对象表示法,可以理解为一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
- JSON和JS对象的格式一样,不过JSON字符串中的属性名必须加双引号,其他和JS语法一致
- JSON分类:
- 对象{}: var json = ‘{“name”:“孙悟空”, “age”:18, “gender”:“男”}’;
- 数组[]: var json = ‘[1,2,3,“hello”,“true”]’;
- JSON中运行的值:
- 字符串
- 数值
- 布尔值
- null
- 对象
- 数组
- 在JS中提供了一个工具类:JSON,可以将JSON转换为js对象,也可以将一个js对象转换为JSON
- var obj = JSON.parse(json); //将JSON字符穿转换为js对象
- var json = JSON.stringify(obj); //将js对象转换为JSON字符串