javascript事件响应

简介:

javascript事件响应

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
     <title>单击事件</title>
     <script type="text/javascript">
           function openwin(){
           window.open(
                'http://www.imooc.com',
                '_blank',
                'height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');
            }
           function messageover(){
           alert(' 鼠标经过事件');
            }
            function messageout(){
            alert('onomouseout 鼠标移开事件');
            }
            function messagefocus(){
            alert('onfocus 光标聚焦事件');
             }
            function messageonblur(){
            alert('onblur 失焦事件');
            }
            function messageonselect(){
            alert('onselect 内容选中事件');
             }
            function messageonchange(){
            alert('onchange 文本框内容改变事件');
             }
            function messageonload(){
            alert('onload 加载事件');
             }
            window.onunload = onunload_message;
            function onunload_message(){
            alert('onunload_message 卸载事件');
            }
       </script>
</head>
        <!--加载事件-->
        <!--卸载事件-->
      <body onload="messageonload()onunload="onunload_message()">
        <from>
        <!--点击事件-->
        <input name="点击" type="button" value="点击" onclick="openwin()"/>
        <br/>
        <!--鼠标经过事件-->
        <input name="确定"  type="button" value="确定" onmouseover="messageover()/>
        <br/>
        <!--鼠标移开事件-->
        <href="http://www.imooc.comonmouseout="messageout()">点击我</a>
        <br/>
        <!--光标聚焦事件-->
        <select name = 'career' onfocus="messagefocus()">
        <option>学生</option>
        <option>教师</option>
        <option>工程师</option>
        <option>演员</option>
        <option>会计</option>
        </select>
        <br/>
        <!--失焦事件-->
        用户:<input name="username" type="text" value="请输入用户名!" onblur="messageonblur()"/>
        密码:<input name="password" type="text" value="请输入密码!"/>
        <br/>
        <!--内容选中事件-->
        <!--文本框内容改变事件-->
        个人简介:<br>
        <textarea name="summary" cols="60" rows="5" onselect="messageonselect()onchange="messageonchange()">
        请输入个人简介,不少于200字</textarea>
        <br/>
        </from>
    </body>
</html>











本文转自 卓行天下  51CTO博客,原文链接:http://blog.51cto.com/9951038/1745918,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
JavaScript 前端开发
js事件队列
js事件队列
|
28天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
29 2
|
2月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
2月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
33 0
|
4月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
39 0
|
10天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
10天前
|
监控 JavaScript 前端开发
|
28天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
2月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
58 1
|
23天前
|
JavaScript 前端开发