这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 Javascript 事件驱动编程的相关资料, 通过经典案例向大家介绍 Javascript 事件驱动编程,需要的朋友可以参考下
一、基本概述 JS 是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个 html 元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理。 PS:这种方式和 Java GUI 中的事件监听机制很像,都是需要注册监听,然后再处理监听,只不过实现的方式不同而已。
二、事件驱动原理
案例:
- <html>
- <head>
- <script type="text/javascript">
- function test1(e) {
- window.alert("x=" + e.clientX + " y=" + e.clientY);
- }
- function test2(e) {
- window.alert("x=" + e.clientX + " y=" + e.clientY);
- }
- function test3(e) {
- window.alert(new Date().toLocaleString());
- }
- function test4(e) {
- if (e.value == "red") {
- div1.style.backgroundColor = "red";
- } else if (e.value == "black") {
- div1.style.backgroundColor = "black";
- }
- }
- </script>
- </head>
- <body>
- <input type="button" onclick="test1(event)" value="button1">
- <input type="button" onmouseover="test2(event)" value="button2">
- <input type="button" onclick="test3(event)" value="button3">
- <div id="div1" style="width: 400px; height: 300px; background-color: red">
- </div>
- <input type="button" onclick="test4(this)" value="red">
- <input type="button" onclick="test4(this)" value="black">
- </body>
- </html>
案例 1:监听鼠标点击事件,并能够显示鼠标点击的位置 x,y
- <html>
- <head>
- <script>
- function test1(e) {
- window.alert("x=" + e.clientX + "y=" + e.clientY);
- }
- </script>
- </head>
- <body onmousedown="test1(event)">
- </body>
- </html>
点击浏览器之后,显示坐标 (有些浏览器可能无效)
案例 2:点击按钮,图片变成红色,黑色方法:JS 访问内部 CSS
- //js如何访问css属性,来改变外观
- <html>
- <head>
- <script>
- function test3(e){
- var pic=document.getElementById("pic");
- if(e.value=="红色"){
- pic.style.backgroundColor="red";
- }
- else if(e.value=="黑色"){
- pic.style.backgroundColor="black";
- }
- }
- </script>
- </head>
- <body >
- <div id="pic" style="border:1;background-color:red;width:300px;height:300px"></div>
- <input type="button" onclick="test3(this)" value="红色">
- <input type="button" onclick="test3(this)" value="黑色">
- </body>
- </html>
方法:JS 访问外部 css(这方法不一定适用于所有浏览器)
- event2.css
- .style {
- border:1;
- background-color:red;
- width:300px;
- height:300px;
- }
- event2.html
- <html>
- <head>
- <script>
- function test3(e){
- //取连接的第一个css文件的内容用0
- var ocssRules=document.styleSheets[0].rules;
- //从ocssRules取出你希望的样式
- var style=ocssRules[0];//这里面的0表示event2.css文件中第一个规则
- if(e.value=="黑色"){
- style.style.backgroundColor="black";
- }
- else if(e.value=="红色"){
- style.style.backgroundColor="red";
- }
- }
- </script>
- </head>
- <body>
- <div class="style"></div>
- <input type="button" onclick="test3(this)" value="红色">
- <input type="button" onclick="test3(this)" value="黑色">
- </body>
- </html>
案例 3:区分当前浏览器的内核是什么?(区分出 ie6/7/8/ 火狐等)
- <script language="javascript">
- if(window.XMLHttpRequest)
- { //Mozilla, Safari, IE7,IE8
- if(!window.ActiveXObject)
- { // Mozilla, Safari,
- alert('Mozilla, Safari');
- }
- else
- {
- alert('IE7 .8');
- }
- }
- else
- {
- alert('IE6');
- }
- </script>
案例 4:一个事件可以被多个函数监听
- <html>
- <head>
- function test(e){
- window.alert("fss");
- }
- function test1(e){
- window.alert("sfdsdf");
- }
- </script>
- </head>
- <body>
- <div class="style"></div>
- <input type="button" onclick="test(this),test1(this)" value="红色">
- </body>
- </html>
案例 5:防止用户通过点击鼠标右键菜单拷贝网页内容,选择网页内容
- <html>
- <script type="text/javascript">
- function test() {
- //window.alert("没有菜单");
- return false;
- }
- function test2() {
- //window.alert("全选不行");
- return false;
- }
- </script>
- </head>
- <!--body元素响应oncontextmenu,onselectstart事件 -->
- <body oncontextmenu="return test()" onselectstart="return test2()">
- 内容
- </body>
- </html>
下篇文章为大家分享一个简单综合案例:简单的计算器,希望大家不要错过。
关于 Javascript 事件驱动编程远不止这些,希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0408/267790.html