js对象事件

Posted 2020-11-23 xiren88

tags:

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

对象

　　创建 var myObject = {};/* 声明对象字面变量*/　添加值myObject.name="Jener";myObject.age=25;

　　代码格式　　var person = {name : "zhangsan",age : 25,say :function(){alert("说汉语");} }

　　访问点语法、person.name; person.say();

js的入口函数 window.onload=function(){}

函数有一定功能代码体的集合函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

基本结构 function functionname(){执行代码} function functionname(参数){执行代码}

带有返回值的函数 /*function sum(a,b){return a+b;}sum(10,5);//程序执行完这句话，sum(10,5)变成了15；var c=sum(10,5);alert(c);*///c是15

变量的生命周期 javascript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁

闭包：是指内部函数可以使用外部函数的变量

js事件

　　onclick事件点击事件 ondbclick事件　　双击事件

　　onload事件页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中

　　onchange事件　　当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

　　　　　　　　　　说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，

　　　　　　　　　　使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。

　　onblur事件和onfocus事件　　onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件

　　onscroll事件　　窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move　

　　　　　　　　　方式 function move() {alert("页面滚动时调用");}window.onscroll = move;

　　鼠标相关事件 onmousemove 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

onmouseout　　鼠标离开某对象范围时，触发事件调用函数。

　　　　　　　　　　　　　　　　onmousemove 事件在鼠标移动到 div 元素上时触发。

　　　　　　　　　　　　　　　　mouseleave 事件只在鼠标指针移出 div 元素时触发。

　　　　　　　　　　　　　　　　onmouseout 事件在鼠标指针移出 div 元素及离开子元素（p 和 span）时触发。

　　　　　　　　onmouseover 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

　　　　　　　　onmouseup 当鼠标松开时触发事件

　　　　　　　　onmousedown 当鼠标按下键时触发事件

通过循环给多个元素添加事件

<body>
		<div class="one">111</div>
		<div class="one">222</div>
		<div class="one">333</div>
		<div class="one">444</div>
	</body>
</html>
<script type="text/javascript">
	var one  = document.getElementsByClassName("one");
	for(var i = 0;i<one.length;i++){
		one[i].onclick = function(){
			alert(this.innerHTML);
		}
	}
</script>

　通过addEventListener() 方法监听事件函数

无参数
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>
有参数
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

　　removeEventListener() 方法

<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

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

js代码片段

VSCode自定义代码片段12——JavaScript的Promise对象

原生js如何绑定a连接点击事件？

AJAX相关JS代码片段和部分浏览器模型

HLS.js 获取视频片段信息

js对象 事件

js对象事件