<body>
<div>123
</div>
<script>
/*
事件对象
event 就是一个事件对象 小括号当形参来看
事件对象是相关事件的集合 比如鼠标信息 键盘信息等
事件对象可以自己命名
有兼容性问题(ie 6 7 8 )
事件对象常用属性和方法
e.target 返回触发事件对象
与this 区别
this 是返回调用者的对象
e 。target返回触发事件对象
e.type 返回事件的类型 click 等
e.preventDefault()阻止默认行为 比如不让链接跳转
e.stopPropagation() 阻止冒泡
以上都是标准写法 ie678不兼容
阻止默认行为
让链接不跳转 或者让提交按钮不提交
e.preventDefault() 标准写法
阻止冒泡
函数里面加 e.stopPropagation()
*/
var div = document.querySelector(div);
div.addEventListener('click', fn);
function fn(e) { e.type };
</script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<Script>
// 事件委托(事件代理)
// 不是每个子节点单独设置监听器 在父节点上设置监听器 利用冒泡原理影响子节点
// 提高程序效率
var ul =document.querySelector('ul');
ul.addEventListener('click', function() {
alert('1234');
});
</Script>
<!-- 常用鼠标事件
onclick
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标谈起触发
onmousedown 鼠标按下触发 -->
<!-- 禁止右键菜单 -->
<script>
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
</script>
<!-- 禁止鼠标选中 -->
<script>
document.addEventListener('selectstart',function(s){
s.preventDefault();
})
</script>
</body>