JavaScript基础（三）事件

￡神魔★判官ぃ 2022-04-13 09:23 170阅读 0赞

事件流  
  
事件流意味着页面上不止一个元素可响应相同的事件  
如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。

事件冒泡  
window ← document ← html ← body ← div  
由点击的位置扩散到整个界面

事件捕获  
由整个界面缩小到点击的位置  
window → document → html → body → div

DOM事件流  
包含事件冒泡和事件捕捉

传统事件处理程序指派方法

一、取得id = div1的元素节点。  
var div1 = document.getElementById("div1");  
//设置元素节点的onclick属性  
div1.onclick = function()\{alert("div1 被点了");\}  
或  
function divClick()\{alert(‘点中’);\}  
div1.οnclick=divClick;

注意： 1、绑定事件处理程序时，后面不能加括号  
2.必须确保在元素之后设置事件处理程序。  
3.可在window.onload中指定处理程序。  
window.onload = function()\{\}页面加载完成后自动调用  
二、在事件属性中指定  
<div id="div1" οnclick="alert("div1 被点了.");" ></div>

现代事件处理程序指派方法

DOM  
var div1 = document.getElementById("div1");  
//添加事件处理程序,true:捕获阶段; false:冒泡阶段  
div1.addEventListener("click",click1,false);  
//删除事件处理程序  
div1.removeEventListener("click",click1,false);  
function click1()\{  
    alert("div1 is click...");  
\}  
提示：删除事件处理程序时，阶段要相同。 传统事件处理程序是在冒泡阶段添加的。

事件处理程序的返回值  
利用事件处理程序的返回值，可以影响事件的默认行为  
超链接例子:  
<a href="a.html" οnclick="return confirm('要跳转吗？')">a.html</a>  
注意：是根据返回结果是true或false来确定是否执行默认行为。

得到event对象  
DOM  
div1.onclick = function()\{  
    var e = arguments\[0\];//event对象  
\}  
或者：  
在元素标签内设置事件的时候，作为函数的参数直接传过去，this当前节点，event就是event对象  
<div οnclick="text(this,event)"></div>  
函数：  
function text（obj,e）｛  
      
｝

event的属性和方法  
获取事件类型：e.type  
获取键盘码：keydown/keyup  
检测是否按下e.shiftKey,e.altKey,e.ctrlKey  
获取客户坐标:e.clientX,e.clientY  //基于body的坐标  
获取屏幕坐标：e.screenX,e.screenY  
获取基于当前元素的坐标：e.offerX,e.offerY

获取事件源    e.srcElement  
获取字符的编码    e.keyCode  
获取字符    e.key  
阻止默认行为    e.returnValue=false    //可以用于限制键盘的输入类型  
中止冒泡传播    e.cancelBubble=true

阻止默认事件：  
<a href="http://www.baidu.com" οnclick="stop(event)">百度</a>  
<script>  
    function stop(event) \{  
        if (event.preventDefault()) \{

event.preventDefault();    
        \} else \{

event.returnValue = false;

\}  
</script>

阻止跳转：  
<a href="javascript:void(0)">不跳转</a>

鼠标事件  
常见事件  
click：单击  
dblclick：双击  
mousedown：鼠标按下  
mouseup：鼠标抬起  
mouseout、mouseleave：鼠标离开  
mousemove：鼠标移动  
mouseenter、mouseover：鼠标进入  
事件发生顺序  
单击：mousedown,mouseup,click  
双击：mousedown,mouseup,click,mousedown,mouseup,click,doubleclick

键盘事件  
常见事件  
keydown   按下  
keypress  可以阻止键盘输入0  
keyup      松开  
事件发生顺序  
字符键：keydown,keypress,keyup  
非字符键：keydown,keyup

HTML事件  
常见事件  
load：文档加载完成  
select：被选中的时候  
change：内容被改变  
focus：获取焦点  
resize：窗口尺寸变化  
scroll：滚动条移动  
blur: 失去焦点  
submit: 用于阻止表单提交

console.log("文档加载完毕！");

\};

/\*window.onunload = function () \{

alert("文档被关闭！");

\};\*/

/\*打印选中的文本\*/

function mySelect(id) \{

var text = document.getElementById(id).value;

console.log(text);

/\*内容被改变时\*/