Js中的事件

Posted 2020-09-11 殷瑜泰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js中的事件相关的知识，希望对你有一定的参考价值。

事件

事件源

事件行为

1、js中常用的事件

onclick 鼠标点击某个对象

onchange 用户改变域的内容

Code：省市联动

<body>

</select>

</select>

</body>

var select = document.getElementById("city");

select.onchange = function(){

var optionVal = select.value;

switch(optionVal){

case ‘bj‘:

var area = document.getElementById("area");

area.innerhtml = "<option>海淀</option><option>朝阳</option><option>东城</option>";

break;

case ‘tj‘:

var area = document.getElementById("area");

area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";

break;

case ‘sh‘:

var area = document.getElementById("area");

area.innerHTML = "<option>浦东</option><option>杨浦</option>";

break;

default:

alert("error");

}

};

</script>

onfocus 元素获得焦点

onblur 元素失去焦点

Code：当获得焦点的时候，提示输入的内容格式，

当失去焦点的时候，提示输入有误

<body>

</body>

var txt = document.getElementById("txt");

txt.onfocus = function(){

//友好提示

var span = document.getElementById("action");

span.innerHTML = "用户名格式最小8位";

span.style.color = "green";

};

txt.onblur = function(){

//错误提示

var span = document.getElementById("action");

span.innerHTML = "对不起格式不正确";

span.style.color = "red";

};

</script>

onmouseover 鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

Code:div元素鼠标移入变为绿色移出恢复原色

#d1{background-color: red;width:200px;height: 200px;}

</style>

</head>

<body>

</body>

var div = document.getElementById("d1");

div.onmouseover = function(){

this.style.backgroundColor = "green";

};

div.onmouseout = function(){

this.style.backgroundColor = "red";

};

</script>

onload 某个页面或图像被完成加载

Code:等到页面加载完毕在执行onload事件所指向的函数

window.onload = function(){

var span = document.getElementById("span");

//alert(span);

span.innerHTML = "hello js";

};

</script>

</head>

<body>

</body>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中

Code:

(2)将事件内嵌到html中而响应行为用函数进行封装

Code:

function fn(){

alert("yyy");

}

</script>

(3)将事件和响应行为与html标签完全分离

Code:

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("zzz");

};

</script>

this关键字

this经过事件的函数进行传递的是html标签对象

Code：

<body>

</body>

function fn(obj){

alert(obj.name);

}

</script>

阻止事件的默认行为

IE：window.event.returnValue = false;

W3c: 传递过来的事件对象.stopPropagation();

Code：

<body>

</body>

function fn(e){

//ie：window.event.returnValue = false;

//W3c：传递过来的事件对象.preventDefault();

//W3c标准

if(e&&e.preventDefault){

alert("w3c");

e.preventDefault();

//IE标签

}else{

alert("ie");

window.event.returnValue = false;

}

</script>

阻止事件的传播

IE：window.event.cancelBubble = true;

W3c: 传递过来的事件对象.stopPropagation();

Code：

<body>

</div>

</body>

function fn1(){

alert("fn1");

}

function fn2(e){

alert("fn2");

//阻止事件的传播

if(e&&e.stopPropagation){

alert("w3c");

e.stopPropagation();

//IE标签

}else{

alert("ie");

window.event.cancelBubble = true;

}

</script>

以上是关于Js中的事件的主要内容，如果未能解决你的问题，请参考以下文章

JS中的事件传播流程

如何使用Vue.js中的按钮点击事件并获取按钮属性