javascript入门第二天


typora-copy-images-to: img


今日内容

  1. 事件
  2. 综合案例:动态添加表格
  3. 常见的内置对象
  4. BOM对象
  5. javascript面向对象
  6. 综合案例:随机抽奖(抽人名),开光灯案例,轮播图案例

一.事件机制

1.常见的名词解释

  • 事件

    在网页里面的事件,指的触发网页的动作,比如:点击鼠标,双击鼠标,按键盘,那么这些动作称之为事件。

    比如:脚踹电动车

  • 事件源

    在网页里面的事件源,指的网页的元素,比如:标签,属性,文本等等,这些称之为事件源

    比如:电动车

  • 监听

    在网页里面的监听,指的通过触发网页的元素,调用事件对应的js代码,实现网页的动态效果

    比如:电动车上的报警器。

    ​ 监听过程: 脚踹电动车,引起报警器报警

2.事件机制概述

事件机制介绍:

​ 回顾javascript基本概念: javascript是基于对象和事件驱动的一门客户端脚本语言。

​ 在这里面事件机制:通过javascript的事件,触发网页的元素,调用事件对应的js代码(定义好的函数),实现网页的动态效果

<!--
 		1.事件源:input的普通按钮
 		2.事件:点击事件onclick
 		3.监听:事件绑定js代码,触发网页的元素,调用事件绑定的js代码,实现动态效果
-->
 	<input type="button" value="点击我,弹出框" onclick="fu1();"  />
 	<script type="text/javascript">
 		//1.提供事件对应的js代码
 		function fu1 () {
 			alert("点我啊,啊,啊");
 		}
 	</script>

3.在html网页绑定事件的两种方式

  • 方式一:直接绑定(直接在标签里面定义事件属性,绑定对应的js代码)

  • 方式二:间接绑定(不在标签里面定义事件属性,在使用时在绑定)

  • 代码如下:

            <input type="button" value="直接绑定" onclick="f1();" />
    		<input type="button" value="间接绑定" id="bt2" />
    		<script type="text/javascript">
    			//1.直接绑定:
    			function f1() {
    				alert("直接绑定---");
    			}
    			//2.间接绑定:
    			//2.1 获取标签对象
    			var input2_tag = document.getElementById("bt2");
    			//2.2 标签对象操作事件属性
    			input2_tag.onclick = function(){
    				alert("间接绑定---");
    			}
           </script>
    
  • 细节

    在事件绑定中,this表示谁?: 点击谁,谁就是this

            点击我,不跳转
    		

你可能感兴趣的:(javascript,前端,html5)