文章目录
一:事件绑定的方式
1·1:html元素内进行绑定
1·2:JS进行绑定
1·3:使用事件监听进行绑定
事件源(元素).addEventListener(去掉on的事件,回调函数,[是否是捕获])
用处一:可以为一个元素,多次绑定相同的事件(类似于代码的合并)
document.addEventListener("click",function(){
alert(1);
});
document.addEventListener("click",function(){
alert(2);
});
用处二:解决事件是捕获还是冒泡【true表示捕获,false表示冒泡】
document.addEventListener("click",function(){
alert("document");
},true);
window.addEventListener("click",function(){
alert("window");
},true);
【当冒泡和捕获同时存在的时候:先捕获在冒泡】
1·4:事件监听的兼容性
-
谷歌等:元素.addEventListener(“去掉on的事件”,function(){},[是否是捕获])默认不写为false冒泡
-
IE:元素.attachEvent(“on事件”,function(){})没有第三个参数,默认就是冒泡
-
兼容写法
function addEvent(obj,type,callBack){ if(obj.addEventListener){ obj.addEventListener(type,callBack); }else{ obj.attachEvent("on"+type,callBack); } } addEvent(document,"click",function(){alert("兼容写法")});
二:事件的委托
定义:某一个事件让其他元素来完成
2·1:委托的好处
- 把某一个事件加到父元素的身上,提高程序的执行效率
- 动态创建的元素,为新添加的元素,提前绑定事件
2·2:委托的实现方法
步骤一:父元素.事件=function(evt){ },
步骤二:获取事件的真正操作元素(注意:委托中真实的事件不是this)
兼容写法:
var target = e.srcElement || e.target;if(target.tagname==“真正操作元素”){}
targat就代表了当前操作的li
注意点:使用querySelector选中的标签是静态的,后面加载的querySelector不可以获取到
步骤三:操作真正的事件源
2·3:例题:
通过事件委托实现高亮
oUl.onclick = function(evt){
//this.style.backgroundColor = "hotpink"; 错误
var e = evt || event;
//真正的操作元素
var target = e.srcElement || e.target;
if(target.tagName == "LI"){
target.style.backgroundColor = "hotpink";
}
}
三:拖拽效果
3·1思路
步骤一:首先为需要拖拽的元素添加onmousedown事件
步骤二:使拖拽的元素在document文档上移动
步骤三:停止移动的时候,触发onmouseup事件,取消移动
步骤四:步骤一二都是依赖于步骤一,因此需要函数的嵌套
var oBox = document.querySelector("#box");
oBox.onmousedown = function(evt){
var e = evt || event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || event;
oBox.style.left = e.pageX - offsetX + "px";
oBox.style.top = e.pageY - offsetY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
3·2:拖拽的边界问题
合理使用offsetwidth
vobox.onmousedown=function(evt){
var e=evt||event;
var offsetX=e.offsetX;
var offsetY=e.offsetY;
document.onmousemove=function(evt){
var e=evt||event;
var left=e.pageX-offsetX;
var top=e.pageY-offsetY;
//进行判断
if(left<0){
left=0;
}
if(top<0){
top=0;
}
//浏览器的可视宽
var leftMax = window.innerWidth - obox.offsetWidth;
if(left>leftMax){
left=leftMax;
}
//浏览器的可视高
var topMax = window.innerHeight - obox.offsetHeight;
if(top>topMax){
top=topMax;
}
obox.style.left=left+"px";
obox.style.top=top+"px";
}
document.onmouseup=function(){
document.onmousemove="";
}
}
四:jSON对象
4·1定义
var json={键:值,…}
严格的json对象 键必须用双引号引起来,json的值可以是任意类型的
4·2操作
json.键,
json[“键”] 用于for in
4·3:json的转换
JSON对象<------>JSON字符串 :必须是严格模式的字符串和对象
var json = {"name":"老王","age":"18"};
var str = JSON.stringify(json);
console.log(str,typeof str);
将字符串<------>JSON对象 :必须是严格模式的字符串和对象
var str1 = '{"name":"老王","age":"18"}';
var json1 = JSON.parse(str1);
console.log(json1,typeof json1);
五:事件的兼容
-
事件的兼容
let e=evt||event;
-
获取滚动条高度 兼容性
var x = document.body.scrollTop || document.documentElement.scrollTop;
-
键盘事件的兼容
var key=e.keycode||e.charcode||e.which
-
事件委托兼容
var target = e.srcElement || e.target;
-
阻止冒泡
e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
-
阻止默认事件
e.preventDefault ? e.preventDefault():e.returnValue = false;
-
事件监听的兼容
```js
function addEvent(obj,type,callBack){
if(obj.addEventListener){
obj.addEventListener(type,callBack);
}else{
obj.attachEvent(“on”+type,callBack);
}
}
addEvent(document,“click”,function(){alert(“兼写法”)});
```
-
事件监听的兼容
```js
function addEvent(obj,type,callBack){
if(obj.addEventListener){
obj.addEventListener(type,callBack);
}else{
obj.attachEvent(“on”+type,callBack);
}
}
addEvent(document,“click”,function(){alert(“兼写法”)});
```