javascript基础-tips

承橙子城

于 2020-10-06 17:27:40 发布

阅读量257

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_36456777/article/details/108443559

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件的冒泡：

指事件的向上传导，当后代元素被绑定的某事件被触发，其祖先元素的相同事件（如同为点击事件）都会被触发（按级一层层往上）
可以通过事件对象来取消冒泡，代码如下

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对象的函数，定时调用：可以将一个函数每隔一段时间执行一次
- 参数：
  1. 回调函数，指定每隔一段时间将要执行的函数
  2. 每次调用间隔的时间，单位是毫秒
- 返回值：返回一个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分类：
1. 对象{}: var json = ‘{“name”:“孙悟空”, “age”:18, “gender”:“男”}’；
2. 数组[]: var json = ‘[1,2,3,“hello”,“true”]’;
JSON中运行的值：
1. 字符串
2. 数值
3. 布尔值
4. null
5. 对象
6. 数组
在JS中提供了一个工具类：JSON，可以将JSON转换为js对象，也可以将一个js对象转换为JSON
1. var obj = JSON.parse(json); //将JSON字符穿转换为js对象
2. var json = JSON.stringify(obj); //将js对象转换为JSON字符串

承橙子城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript基础-tips

事件的冒泡：指事件的向上传导，当后代元素被绑定的某事件被触发，其祖先元素的相同事件（如同为点击事件）都会被触发（按级一层层往上）可以通过事件对象来取消冒泡，代码如下var s1 = document.getElementById("s1");s1.onclick = function(event){ //event这么写是为了各种浏览器兼容 event = evevt || window.event; alert("我是后代元素的单击响应事件")； //取消事件冒泡 event.c
复制链接

扫一扫

专栏目录