文章目录
事件冒泡
点击标签里面的按钮时,会触发标签的点击事件,事件往上传递了
再触发事件的时候 会一层一层向上冒泡(他同时会触父类事件)
阻止事件冒泡
意思就是阻止事件的向上传递
stopPropagation
stopPropagation方法,可以阻止事件冒泡,且他遵从W
3C的规范(兼容各大浏览器 ie9之前不兼容)
e.stopPagation()
e.cancelBubble
ie浏览器的阻止事件冒泡 利用了一个属性 cancelBubble 设置为true 他也兼容各大浏览器(不遵从w3c规范 未来这个属性可能没有用)
e.cancelBubble = true//取消冒泡 不建议写这种
建议的写法(三元运算符更好)
if(e.stopPropagation){ //如果浏览器可以使用
e.stopPropagation() //就使用这个
}else{
e.cancelBubble = true //如果不能使用就使用这个
}
默认行为
return false 阻止默认行为,遵从w3c但是ie9浏览器之前不支持
ie兼容写法,其他浏览器也可以使用
e.preventDefault() 阻止默认事件
e.preventDefault()
e.returnValue
针对低版本浏览器
e.returnValue = false
右键出现菜单 oncontextmenu的事件
document.oncontextmenu = function(e){
//return false 后面的内容不会执行 return false一般放在最后一句
//如果第一个可以用就用第一个 不可以使用第二个
e.preventDefault?e.preventDefault():e.returnValue = false
}
offset 都是只读属性,不能设置
offsetParent
获取偏移的父元素 上级元素谁加了定位我就找谁,都没有加找body,都加了定位的话就近找
获取offsetLeft offsetTop
获取自己的偏移量,基于offsetParent 离左边的距离和离上边的距离
获取offsetWidth 和 offsetheight
获取宽高
元素.offsetWidth
元素.offsetHeight
实现拖拽
// 实现拖拽
// 鼠标按下去 然后移动 就会跟着动 鼠标松开不动了
// 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标松开 onmouseup
// offset家族的内容 只能读取不能设置
var box = document.getElementById('box')
box.onmousedown = function(){
box.onmousemove = function(e){
e = e || window.event
//获取鼠标的位置
var mouseX = e.pageX
var mouseY = e.pageY
//中心点要减去的宽高
var w = box.offsetWidth/2
var h = box.offsetHeight/2
//定位设置left值以及top值
var left = mouseX - w //鼠标坐标-原本的宽度的一半 //在内部的坐标
var top = mouseY - h
this.style.left = left+'px'
this.style.top = top+'px'
}
}
//鼠标弹起事件
box.onmouseup = function(){
box.onmousemove = function(){
}
}
获取样式的兼容
使用style属性 只能获取style属性内部的内容(只能获取内嵌的样式) 是不能获取对应的内联样式的
js的style属性只能操作内嵌的
getComputedStyle方法是可以获取对应的设置所有样式
getComputedStyle
getComputedStyle 获取样式支持ie9及其他浏览器 参数1为element 参数为string 可省略
window.getComputedStyle(元素)
样式对象 里面的属性 获取字体样式
window.getComputedStyle(元素).color
currentStyle
ie8以前的浏览器 currentStyle 获取样式
元素.currentStyle
常用方式 解决兼容
if (window.getComputedStyle) {
style = window.getComputedStyle(box, null); //支持IE9+及非IE浏览器
} else {
style = box.currentStyle; // IE8及以前
}
使用三元运算符
var style = window.getComputedStyle?window.getComputedStyle(box):box.currentStyle
事件监听
<div>
123
</div>
<button onclick="remove()">移除div事件监听</button>
<!-- 事件监听 事件监听是对应的一个事件监听器给到对应的元素
我们可以通过添加事件监听器给到某个元素 来给他绑定事件 -->
<script>
var div = document.getElementsByTagName('div')[0]
//常用方式
// div.onclick = function(){
// console.log('hello');
// }
//添加事件监听 参数1为事件名 参数2为对应执行的方法
var fn = function(){
console.log('hello world');
}
div.addEventListener('click',fn)
//function是对象 引用数据类型 function声明一个函数 上面的是一个函数对象 下面的又是一个函数对象
//这个俩个对象并不相等 这个是独立的俩个对象 直接在里面写function是没有办法移除的
function remove(){
//移除事件监听 参数1为事件名 参数2 执行的方法
div.removeEventListener('click',fn)
}
//关于浏览器兼容问题 针对ie8以下的浏览器
// box.attachEvent("onclick", fn); //添加事件
// box.detachEvent("onclick", fn); //移除事件
//完整兼容写法
//添加的写法
// if(box.addEventListener){
// //事件是否捕捉 默认为false 为事件冒泡
// box.addEventListener('click',fn,false)
// }else{
// box.attachEvent("onclick", fn);
// }
function addEvent(element,type,fn){
if(element.addEventListener){
//事件是否捕捉 默认为false 为事件冒泡
element.addEventListener(type,fn,false)
}else{
element.attachEvent("on"+type, fn);
}
}
//移除的写法
// if(box.removeEventListener){
// //事件是否捕捉 默认为false 为事件冒泡
// box.removeEventListener('click',fn)
// }else{
// box.detachEvent("onclick", fn);
// }
function removeEvent(element,type,fn){
if(element.addEventListener){
//事件是否捕捉 默认为false 为事件冒泡
element.addEventListener(type,fn,false)
}else{
element.attachEvent("on"+type, fn);
}
}
</script>
事件委托
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!-- 事件委托机制就是将自己要加的事件加给父元素(当子元素很多的时候) -->
<script>
// 点击li打印里面的值 给li添加点击事件
//利用事件委托机制我给ul添加
var box = document.getElementById('box')
box.onclick = function(e){
//通过e.target找到你点击的目标元素 来进行操作
console.log(e.target.innerText);//目标元素
init()
e.target.style.backgroundColor = 'red'
}
function init(){
var lis = box.children
for(var i=0;i<box.childElementCount;i++){
// console.log(i);
lis[i].style.backgroundColor = ''
}
}
</script>