javascript使用事件_在window.print()页面执行事件-优快云博客

本文介绍了三种处理网页事件的方法：内联处理、函数处理及DOM处理。详细解析了不同场景下的应用方式，包括事件对象的使用、事件流的概念以及如何取消默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        p{
            background: gray;
            color: white;
            padding:10px;
            margin:5px;
            border: thin solid black;
        }
        span{
            background: white;
            color: black;
            padding: 2px;
            cursor:pointer;
        }
        a{
            background:gray;
            color:white;
            padding: 10px;
            border: thin solid black;
        }
        table{
            margin: 5px;
            border-collapse: collapse;
        }
        th,td{
            padding: 4px;
        }

1)在元素上使用某个以on开头的属性——内联处理事件；

    <p onmouseover="this.style.background='white';this.style.color='black'"
       onmouseout="this.style.removeProperty('color');this.style.removeProperty('background')">
        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
        帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
    </p>

2)定义函数，并用它的名称作为以on开头的属性里的值——用函数处理事件；

<p onmouseover="handleMouseOver(this)"
   onmouseout="handleMouseOut(this)">
    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
    远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p onmouseover="handleMouseOver(this)"
   onmouseout="handleMouseOut(this)">
    远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
    战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
    并与100多家企业建立长期战略伙伴的合作关系。。
</p>

    <script type="text/javascript">
        function handleMouseOver(elem){
            elem.style.background='white';
            elem.style.color='black';
        }
        function handleMouseOut(elem){
            elem.style.removeProperty('background');
            elem.style.removeProperty('color');
        }
    </script>

3.1)使用标准的DOM搜索技巧，并用以on开头的属性指派一个函数——用DOM处理事件；

3.2)用代表该元素的HTMLElement对象上的addEventListener方法——用DOM处理事件；

<p id="block1">
    远地本着“构筑诚信，永续发展”的理念为客户提供专业的<span id="licai">理财</span>服务、财富管理以及产品方案推荐。
    远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p id="block2">
    远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
    战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
    并与100多家企业建立长期战略伙伴的合作关系。。
</p>
<pre name="code" class="html"><button id="pressme">点击移除事件</button>

<script type="text/javascript">
<span style="font-family:KaiTi_GB2312;">  //使用Dom构建事件处理</span>
  var pElems=document.getElementsByTagName("p");
    for(var i=0;i<pElems.length;i++){
        pElems[i].onmouseover=handleMouseOver;
        pElems[i].onmouseout=handleMouseOut;
    }
    function handleMouseOver(e){
        e.target.style.background='white';
        e.target.style.color='black';
    }
    function handleMouseOut(e){
        e.target.style.removeProperty('background');
        e.target.style.removeProperty('color');
    }
</script>

<script type="text/javascript"><span style="font-family:KaiTi_GB2312;">
</span>//使用addEventListener和removeEventListener方法 
var pElems=document.getElementsByTagName("p");
    for(var i=0;i<pElems.length;i++){
        pElems[i].addEventListener("mouseover",handleMouseOver);
        pElems[i].addEventListener("mouseout",handleMouseOut);
    }
    document.getElementById("pressme").onclick=function(){
        document.getElementById("block2").removeEventListener("mouseout",handleMouseOut);
    }
    function handleMouseOver(e){
        e.target.style.background='white';
        e.target.style.color='black';
    }
    function handleMouseOut(e){
        e.target.style.removeProperty('background');
        e.target.style.removeProperty('color');
    }
</script>

3.3)Event对象的函数和属性

type——事件的名称（如mouseover）；

target——事件指向的元素；

currentTarget——带有当前被触发事件监听器的元素；

eventPhase——事件生命周期的阶段；

bubbles——如果事件会在文档里冒泡则返回true,否则返回false;

cancelable——如果事件带有可撤销的默认行为则返回true,否则返回false;

timeStamp——事件的创建时间，如果事件不可用则为0；

stopPropagation()——在当前元素的事件监听器被触发后终止事件在元素树中的流动；

stopImmediatePropagation()——立即终止事件在元素树中的流动。当前元素上未被触发的事件监听器会被忽略；

preventDefault()——防止浏览器执行与事件关联的默认操作；

defaultPrevented——如果调用过preventDefault()则返回true;

<script type="text/javascript">
//<span style="font-family:KaiTi_GB2312;">使用type属性</span>
 var pElems=document.getElementsByTagName("p");
    for(var i=0;i<pElems.length;i++){
        pElems[i].onmouseover=handleMouseEvent;
        pElems[i].onmouseout=handleMouseEvent;
    }
    function handleMouseEvent(e){
        if(e.type=="mouseover"){
            e.target.style.background='white';
            e.target.style.color='black';
        }else{
            e.target.style.removeProperty('background');
            e.target.style.removeProperty('color');
        }
    }
</script>

<script type="text/javascript">
<span style="font-family:KaiTi_GB2312;">//</span>理解事件流:捕捉、目标、冒泡
 var licai=document.getElementById("licai");
    var textblock=document.getElementById("block1");
    licai.addEventListener("mouseover",handleMouseEvent);
    licai.addEventListener("mouseout",handleMouseEvent);
    textblock.addEventListener("mouseover",handleDescendantEvent,true);
    textblock.addEventListener("mouseout",handleDescendantEvent,true);
    textblock.addEventListener("mouseover",handleBubbleMouseEvent,false);
    textblock.addEventListener("mouseout",handleBubbleMouseEvent,false);
    function handleBubbleMouseEvent(e){
        if(e.type=="mouseover" && e.eventPhase==Event.BUBBLING_PHASE){
            e.target.style.padding="5px";
        }else if(e.type=="mouseout" && e.eventPhase==Event.BUBBLING_PHASE){
            e.target.style.removeProperty('padding');
        }
    }
    function handleDescendantEvent(e){
        if(e.type=="mouseover" && e.eventPhase==Event.CAPTURING_PHASE){
            e.target.style.border="thick solid red";
            e.currentTarget.style.border="thick double black";
        }else if(e.type=="mouseout" && e.eventPhase==Event.CAPTURING_PHASE){
            e.target.style.removeProperty('border');
            e.currentTarget.style.removeProperty('border');
        }
        //e.stopImmediatePropagation();
        //e.stopPropagation();
    }
    function handleMouseEvent(e){
        if(e.type=="mouseover"){
            e.target.style.background='white';
            e.target.style.color='black';
        }else{
            e.target.style.removeProperty('background');
            e.target.style.removeProperty('color');
        }
    }
</script>

    <a href="http://www.sina.com.cn">访问新浪</a>
    <a href="http://www.w3school.com.cn">访问W3C</a>

<script type="text/javascript"><span style="font-family:KaiTi_GB2312;">
//</span>撤销默认的行为<span style="font-family:KaiTi_GB2312;">
</span> function handleClick(e){
        if(!confirm("您真的要访问"+ e.target.href+" 吗?")){
            e.preventDefault();
        }
    }
    var elems=document.querySelectorAll("a");
    for(var i=0;i<elems.length;i++){
        elems[i].addEventListener("click",handleClick,false);
    }
</script>

3.4)使用HTML事件

3.4.1）文档事件（document对象）

readystatechange——在readyState属性的值发生变化时触发；

3.4.2）窗口事件（window对象）

onabort——在文档或资源加载过程被终止时触发；

onafterprint——在已调用window.print()方法，但尚未给用户提供打印选项时触发；

onbeforeprint——在用户完成文档打印后触发；

onerror——在文档或资源的加载发生错误时触发；

onhashchangge——在锚部分发生变化时触发；

onload——在文档或资源加载完成时触发；

onpopstate——触发后提供一个关联浏览器历史的状态对象；

onresize——在窗口缩放时触发；

onunload——在文档从窗口或浏览器中卸载时触发；

3.4.3）鼠标事件

click——在点击并释放鼠标键时触发；

dbclick——在两次点击并释放鼠标键时触发；

mousedown——在点击鼠标键时触发；

mouseenter——在光标移入元素或某个后代元素所占据的屏幕区域时触发；

mouseleave——在光标移出元素或所有后代元素所占据的屏幕区域时触发；

mousemove——当光标在元素上移动时触发；

mouseout——与mouseleave基本相同，除了当光标仍然在某个后代元素上时也会触发；

mouseover——与mouseenter基本相同，除了当光标仍然在某个后代元素上时也会触发；

mouseup——在释放鼠标键时触发；

3.4.3.1)MouseEvent对象

button——标明点击的是哪个键。0是鼠标主键，1中中键，2是右键；

altKey——如果在事件触发时按下了alt/option键则返回true；

clientX——返回事件触发时鼠标相对于元素视口的X坐标；

clientY——返回事件触发时鼠标相对于元素视口的Y坐标；

screenX——返回事件触发时鼠标相对于屏幕坐标系的X坐标；

screenY——返回事件触发时鼠标相对于屏幕坐标系的Y坐标；

shiftKey——如果在事件触发时按下了shift键则返回true;

ctrlKey——如果在事件触发时按下了Ctrl键则返回true;

<p id="block1">
    远地本着“构筑诚信，永续发展”的理念为客户提供专业的<span id="licai">理财</span>服务、财富管理以及产品方案推荐。
    远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<table border="1">
    <tr>
        <th>Type:</th><td id="eType"></td>
    </tr>
    <tr>
        <th>X:</th><td id="eX"></td>
    </tr>
    <tr>
        <th>Y:</th><td id="eY"></td>
    </tr>
</table>

<script type="text/javascript">
//使用MouseEvent对象响应鼠标事件
    var textblock=document.getElementById("block1");
    var typeCell=document.getElementById("eType");
    var xCell=document.getElementById("eX");
    var yCell=document.getElementById("eY");

    textblock.addEventListener("mouseover",handleMouseEvent,false);
    textblock.addEventListener("mouseout",handleMouseEvent,false);
    textblock.addEventListener("mousemove",handleMouseEvent,false);

    function handleMouseEvent(e){
        if(e.eventPhase==Event.AT_TARGET){
            typeCell.innerHTML= e.type;
            xCell.innerHTML= e.clientX;
            yCell.innerHTML= e.clientY;
        }
        if(e.type=="mouseover"){
            e.target.style.background='black';
            e.target.style.color='white';
        }else{
            e.target.style.removeProperty('color');
            e.target.style.removeProperty('background');
        }
    }
</script>

3.4.4）键盘焦点事件

blur——在元素失去焦点时触发；

focus——在元素获得焦点时触发；

focusin——在元素即将获得焦点时触发；

focusout——在元素即将失去焦点时触发；

3.4.5）键盘事件

keydown——在用户按下某个键时触发；

keypress——在用户按下并释放某个键时触发；

keyup——在用户释放某个键时触发；

3.4.5.1)KeyboardEvent对象

char——返回按键代表的字符；

key——返回所按的键；

ctrlKey——如果在按键时Ctrl键处于按下状态则返回true;

shiftKey——如果在按键时shift键处于按下状态则返回true;

altKey——如果在按键时shift键处于按下状态则返回true;

repeat——如果该键一直处于按下状态时则返回true;

<form>
    <p>
        <label for="fave">Fruit:<input autofocus id="fave" name="fave"/></label>
    </p>
    <p>
        <label for="name">Name:<input autofocus id="name" name="name"/></label>
    </p>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>
<br/>
<span id="message"></span>

<script type="text/javascript">
    var inputElems=document.getElementsByTagName("input");
    for(var i=0;i<inputElems.length;i++){
        inputElems[i].onkeyup=handleKeyboardEvent;
    }
    function handleKeyboardEvent(e){
        document.getElementById("message").innerHTML="Key pressed: "+ e.keyCode+" Char："+String.fromCharCode(e.keyCode);
    }
</script>

3.4.6)表单事件

submit——在表单提交时触发；

reset——在表单重置时触发；