【无标题】

最新推荐文章于 2024-07-14 15:54:59 发布

思涵大前端

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量95

点赞数

文章标签： servlet javascript java

本文链接：https://blog.csdn.net/c9087/article/details/125958520

版权

3 鼠标事件
onclik
ondbclick
onmousedown
onmouseup
onmouseover 鼠标悬停
onmouseout 鼠标离开
onmousemove 鼠标移动
onmousewhell 鼠标滚轮事件
ondrag 拖拽
ondragenter
ondragleave
4.表单事件
onchange
onsubmit
onreset
onblur 失去焦点
onfocus 获得焦点
oninput 当元素获得用户输入时事件

onselect
..事件的传播过程
冒泡事件流:
事件有下至上传播(像水泡一样往上传) 默认情况下应用的冒泡事件
捕获事件流由上至下传输开发人员指定
三事件绑定的方式
1.<div οnclick="f1()"></div>
2.document.getElementById("id01).οnclick=function(){

}
3.DOM2事件模型
addEventListener(arg1,arg2,arg3)
removeEventlisener(arg1,arg2,arg3)
arg1：绑定的事件类型名
arg2:执行的事件函数
arg:事件传播方式
true:捕获方式
false 冒泡方式
function f1() {
console.log("id02...")
}

document.getElementById("id02").addEventListener("click", f1, true)

function f2() {
document.getElementById("id02").removeEventListener("click", f1, true)
}
4.ie事件模型
attachEvent(arg1,arg2)
arg1：绑定的事件类型名
arg2:执行的事件函数
datachEvent(arg1,arg2) 移除事件
document.getElementById("id01").attachEvent("onclick",function(){

})
四.阻止事件冒泡
event.stopPropagation()现在高级浏览器
event.cancelBubble=true ie浏览器
document.getElementById("id02").addEventListener("click", function() {
console.log("id02...")
event.stopPropagation()
}, false)
兼容：
if(window.event){
event.cancelBubble=true
}esle{
event.stopPropagation()
}
五.阻止默认事件
1.return false;
事件处理函数如不返回值，则会发生默认行为，
如果返回false会阻止浏览器默认动作
<a href="./img/1.jpg" οnclick="alert(12);return false;">连接</a>
2.event.preventDafault()

<body>
<a href="./img/1.jpg" id="id01">连接</a>
</body>
<script>
document.getElementById("id01").onclick = function(event) {
alert(12)
event.preventDefault()
alert(22)
}
</script>
3.return false与event.preventDafault()区别
都会阻止浏览器的默认事件
return false 退出执行，后面代码不执行
event.preventDafault() 后面的代码继续执行
应用:

document.oncontextmenu = function() {
return false;
}禁止右键菜单
// document.oncontextmenu = function() {禁止右键菜单
return false;
}
document.onpaste = function() {
return false;
}
document.oncopy = function() {
return false;
}
document.oncut = function() {
return false;
}
document.onmousewheel = function() { ie支持
return false;
}
document.onselectstart = function() {
return false;
}

六.事件参数
事件参数表示当前的发生的事件的event对象
该事件记录了事件发生的相关信息
document.getElementById("id01").onclik=function(event事件参数){
//事件源
console.log(event.srcElement)
console.log(event.target)
}
document.getElementById("id01").onclik=function(e){

}
1.事件源
event.srcElement
event.target //ff火狐低版本
目前浏览器以上都支持
兼容 :var esr= event.srcElement||event.target
2.事件参数表示当前的发生的事件的event对象
事件对象
兼容
var event=event||window.event(ie低版本)
3.获取内容
兼容：
var content=a.innerText||escr.textContent(ff火狐低版本)
七.事件代理
1. 将事件处理加载到父级元素上，可避免将事件处理加载到多个子集元素上。
2.原理：利用的就是事件冒泡和目标元素
不去监听所有的子元素事件，只监听他们的父级元素，当某个子元素被触发时，事件会向上冒泡的父级元素
在父级元素事件中，检查event事件源，来判断具体是哪个子元素被选中了
3.优点：(1)提供性能
(2)新增元素，前面的事件依然有效

<ul id="id01">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button id="b1">新增</button>
</body>
<script>
document.getElementById("id01").onmouseover = function(event) {
var event = event || window.event
var eas = event.srcElement || event.target
if (eas.nodeName.toLowerCase() == "li") {
eas.style.color = "red"
}

}
document.getElementById("id01").onmouseout = function(event) {
var event = event || window.event
var eas = event.srcElement || event.target
if (eas.nodeName.toLowerCase() == "li") {
eas.style.color = ""
}
}
document.getElementById("b1").onclick = function() {
var ul = document.getElementById("id01")

ul.innerHTML += "<li>a666</li>"
}
八。mouseenter与mouseover区别
mouseover：鼠标指针穿过被选元素及其子元素时触发---冒泡
mouseenter 只有穿过被选元素时才触发 ---不冒泡
不冒泡事件：
onmouseenter onmouseleave onfocus onblur onload onunload
九。监听Dom加载事件
window.οnlοad=function(){
//页面信息全都加载完
}
2.DOMContentLoaded//dom树全都加载完后即执行，不理会图片，js文件，css文件等是否已经加载完成
document.addEventListener("DOMContentLoaded", function() {
alert(22)
})
十键盘事件
onkeydown a A 65
onkeyup a A 65
onkeypress a 97 A 65
event.keycode 获取当前按键的ascii编码
event.ctrlkey ==true 按ctrl键
event.altkey
event.shiftkey
if(event.ctrkey&&event.keycode==65)