Js事件和函数

xiaoxiao2021-02-28  6

JavaScript函数和事件

系统自带函数

isNaN()检查数值算法为数字,返回true|false,字符返回true,数字返回flase,根据值来判断是否为数字,不会根据数据类型来判断 eval();将字符串中的代码运行

<script> var a = 5; //true document.write(isNaN("aaa123")); //flase document.write(isNaN(a)); //flase,这isNaN指挥值判断是否为数字,不根据数据类型来判断 document.write(isNaN("123")); </script> <script> var a = "alert(123)"; //弹出警告框123 eval(a); </script>

自定义函数

fun 函数名 (参数1,参数2,….) {

函数代码块

} 或、 var 函数名 = function(参数1,参数2,……) {

函数代码块

}

<script> function fun1(x){ document.write(x+"<br />"); } fun1(1); fun1(2); fun1(3);*/ function squre1(number){ return number * number; } document.write( 5+"平方为:"+squre1(5)+"<br />"); var squre2 = function(num){ return num * num ; } document.write(5 +"的平方:"+squre2(5)) </script>

匿名函数

<script> (function(x,y){ alert(x+y); return x+y; //匿名函数的使用 }(3,4)); </script>

全局变量和局部变量

全局的变量:在最外部定义的变量,不使用var定义的变量(自动放在了window对象下) 局部变量:定义在函数内,起作用域为函数

<script> function fun1(){ //这样写是window.a,window是隐藏的 a = 10; //局部变量 var b = 15 } fun1(); //调用的是window.a alert(a); </script>

事件

onload 页面全部加载完时触发,也可以写在标签里面 <script > //当页面全部加载完成时触发 /* window.onload = function(){ alert(888); }*/ function fn(){ alert(888); } </script> onfocus 获得焦点时触发,多用于表单 //onfocus:是属性 <input type="text" onfocus="fun1()" /> <script> function fun1(){ document.write("input获取焦点时触发函数<br/>") } </script> onblur 失去焦点时触发,onchange 文本改变时触发 <input type="text" id="in"/> <script> document.getElementById("in").onfocus=fun1; function fun1(){ //log日志 console.log("input获取焦点时触发函数<br/>"); } //失去焦点,调用匿名内部函数 document.getElementById("in").onblur =function(){ console.log("input失去焦点时触发函数"); } document.getElementById("in").onchange = function(){ console.log("我被改变了"); } </script> ```` 4. onsubmit表单提交时触发 <div class="se-preview-section-delimiter"></div> ```html //action="#" 提交到当前页面 <form action="#" id="from1"> <input type="text" /> <input type="submit" /> </form> <script> document.getElementById("from1").onsubmit = function(){ console.log("表单提交了!"); alert(999) } </script> onmouseover鼠标移动到上面触发,onmouseleave鼠标离开触发 //action="#" 提交到当前页面 <form action="#" id="from1"> <input type="text" /> <input type="submit" /> </form> <script> document.getElementById("from1").onsubmit = function(){ console.log("表单提交了!"); alert(999) } </script> onmouseover鼠标移动到上面触发,onmouseleave鼠标离开触发 <h1 id="d1">我是污妖王</h1> <h2 id="d2" onmouseover="console.log('哈哈哈哈!')">我是小明</h2> <script> var wyw = document.getElementById("d1"); wyw.onmouseover = function(){ console.log("哇!你好污!!!"); } wyw.onmouseleave = function(){ console.log("还好啊!!!") } </script> onclick对象被单击时,ondbclick对象被双击时 <script> var wyw = document.getElementById("d1"); wyw.onclick = function(){ console.log("单击污妖王"); } wyw.ondblclick = function(){ alert("不要双击污妖王!"); } </script>

submit的确定提交可取消提交

<form action="#" id="from1"> 留言板标题<input /><br /> 留言内容<textarea></textarea> <input type="submit" value="提交"/> </form> <script> var kk = document.getElementById("from1"); kk.onsubmit = function(){ var isSumit = confirm("确定提交"); if(isSumit){ return true; } return false; } </script>

输出调试法

alter()调试法document.write()调试方法console对象调试法(IE不支持),console.log(“str”)打印log日志,在开发窗口查看

调试工具

Firebug、游览器自带开发窗口,使用f12调出开发窗口

转载请注明原文地址: https://www.6miu.com/read-450182.html

最新回复(0)