JQuery--事件总结
总结:
<script>
/**
* 能够实现jQuery当中的事件处理
* .click()
* .on('click',事件处理程序)
* // 事件委托
* .on('click','子元素选择器',事件处理程序)
* $(委托对像).on('click','真正的事件源'.事件处理程序)
* .bind() // 不能做事件委托
* .delegate() // 只能做事件委托
* 能够实现JQuery中的事件解绑
* .off()
*
* 能够完成jQuery的事件触发
* .click()
* .trigger('click')
*
* 能够使用jQuery设置尺寸
* .width() width
* .innerWidth() width + padding
* .outerWidth() width + padding + border
* .outerWidth(true) width + padding + border + margin
* 能够使用jQuery操作坐标
* .offset() 永远基于网页文档（document）获取
* .position() 基于定位的祖先元素(offsetParent)获取
* */
</script>
题外:
去除空格trim的区别
1 <script> 2 var str = " 这里是数据前后默认都有空格 "; 3 console.log(str); 4 console.log(str.trim()); // 不兼容ie9 5 console.log($.trim(str)); // 都兼容 6 </script>
一.事件注册机制
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .father{ 8 width: 300px; 9 height: 300px; 10 background-color: pink; 11 border:1px solid #f00; 12 } 13 .father .son{ 14 width: 100px; 15 height: 100px; 16 background: deepskyblue; 17 } 18 </style> 19 <script src="lib/jquery-1.12.2.js"></script> 20 21 <body> 22 <div class="father"> 23 父盒子 24 <div class="son">子盒子</div> 25 </div> 26 </body> 27 </html> 28 <script> 29 /** 一.快速注册 30 * 事件源.事件类型（事件处理程序）; 31 * 二.on方式注册 32 * 事件源.on(事件类型,事件处理程序); 33 * 事件源.on(事件类型,数据,事件处理程序); // 比较少用 34 * 事件源.on(事件类型,子元素选择器,事件处理程序); // 事件委托(代理) 35 * 事件源.on(事件类型,子元素选择器,数据,事件处理程序); 36 * 事件类型和事件处理程序是必选参数 37 * 子元素选择器和数据是课选参数 38 * 39 * 40 * 41 * */ 42 43 /*快速注册*/ 44 /* $(".son").click(function () { 45 alert('你点击了子盒子') 46 }); 47 $(".father").click(function () { 48 alert('你点击了父盒子') 49 }); 50 */ 51 /*on方式注册*/ 52 /*$('.son').on('click mouseenter',{data:'123这是一份数据'},function (event) { 53 console.log(event.data); 54 console.log("on方式注册事件1"); 55 });*/ 56 57 58 /*事件委托*/ 59 // father是委托,son才是触发的 60 $('.father').on('click','.son',function (event) { 61 console.log(this); //JQ里on的方式注册事件,子元素选择器处理成了真正的事件源 62 alert("on方式注册事件1"); 63 }); 64 65 </script> 66 </head>
1 $('.father').click(function () { 2 3 }); 4 $('.father').bind('click',function () { 5 6 }); 7 $('.father').delegate('.son','click',function () { 8 9 }); 10 $('.father').on('click','.son',function () { 11 12 });
四种事件注册方式的区别：
1 /*事件委托*/ 2 // father是委托,son才是触发的 3 /* $('.father').on('click','.son',function (event) { 4 console.log(this); //JQ里on的方式注册事件,子元素选择器处理成了真正的事件源 5 alert("on方式注册事件1"); 6 });*/ 7 8 /*bind无法实现事件委托！！！*/ 9 /* $('.father').bind('click','.son',function (event) { 10 console.log(this); // 11 alert("on方式注册事件1"); 12 });*/ 13 14 /*顺序不一样，delegate只能做事件委托！！！*/ 15 $('.father').delegate('.son','click',function (event) { 16 console.log(this); //JQ里on的方式注册事件,子元素选择器处理成了真正的事件源 17 alert("on方式注册事件1"); 18 });
二.事件委托(依靠冒泡实现的原理、事件委托的优点)
与快速注册事件的性能相比：
1 <script> 2 /** 3 * 事件委托优点： 4 * 1.可以给新添加的元素共享事件(共享事件) 5 * 2.给大量的目标元素添加相同事件的时候，性能更好(性能更好) 6 * 7 * */ 8 $(function () { 9 10 console.time('快速注册'); 11 $('#list li').click(function () { 12 alert("A:快速注册方式添加点击事件"); 13 }); 14 console.timeEnd('快速注册') 15 16 17 console.time('事件委托'); 18 $('#list').on('click','li',function () { 19 alert("Ｂ:事件委托方式添加点击事件"); 20 }); 21 console.timeEnd('事件委托') 22 23 }); 24 </script>
例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="lib/jquery-1.12.2.js"></script> 7 <script> 8 /** 9 * 事件委托优点： 10 * 1.可以给新添加的元素共享事件(共享事件) 11 * 2.给大量的目标元素添加相同事件的时候，性能更好(性能更好) 12 * 13 * */ 14 $(function () { 15 16 console.time('快速注册'); 17 $('#list li').click(function () { 18 alert("A:快速注册方式添加点击事件"); 19 }); 20 console.timeEnd('快速注册') 21 22 23 console.time('事件委托'); 24 $('#list').on('click','li',function () { 25 alert("Ｂ:事件委托方式添加点击事件"); 26 }); 27 console.timeEnd('事件委托') 28 29 }); 30 </script> 31 </head> 32 <body> 33 <h1>给大量的目标元素添加相同事件的时候，事件委托性能更好</h1> 34 <ul id="list"> 35 <li>001</li> 36 <li>002</li> 37 <li>003</li> 38 <li>004</li> 39 <li>005</li> 40 <li>006</li> 41 <li>007</li> 42 <li>008</li> 43 <li>009</li> 44 <li>010</li> 45 <li>011</li> 46 <li>012</li> 47 <li>013</li> 48 <li>014</li> 49 <li>015</li> 50 <li>016</li> 51 <li>017</li> 52 <li>018</li> 53 <li>019</li> 54 <li>020</li> 55 <li>021</li> 56 <li>022</li> 57 <li>023</li> 58 <li>024</li> 59 <li>025</li> 60 <li>026</li> 61 <li>027</li> 62 <li>028</li> 63 <li>029</li> 64 <li>030</li> 65 <li>031</li> 66 <li>032</li> 67 <li>033</li> 68 <li>034</li> 69 <li>035</li> 70 <li>036</li> 71 <li>037</li> 72 <li>038</li> 73 <li>039</li> 74 <li>040</li> 75 <li>041</li> 76 <li>042</li> 77 <li>043</li> 78 <li>044</li> 79 <li>045</li> 80 <li>046</li> 81 <li>047</li> 82 <li>048</li> 83 <li>049</li> 84 <li>050</li> 85 <li>051</li> 86 <li>052</li> 87 <li>053</li> 88 <li>054</li> 89 <li>055</li> 90 <li>056</li> 91 <li>057</li> 92 <li>058</li> 93 <li>059</li> 94 <li>060</li> 95 <li>061</li> 96 <li>062</li> 97 <li>063</li> 98 <li>064</li> 99 <li>065</li> 100 <li>066</li> 101 <li>067</li> 102 <li>068</li> 103 <li>069</li> 104 <li>070</li> 105 <li>071</li> 106 <li>072</li> 107 <li>073</li> 108 <li>074</li> 109 <li>075</li> 110 <li>076</li> 111 <li>077</li> 112 <li>078</li> 113 <li>079</li> 114 <li>080</li> 115 <li>081</li> 116 <li>082</li> 117 <li>083</li> 118 <li>084</li> 119 <li>085</li> 120 <li>086</li> 121 <li>087</li> 122 <li>088</li> 123 <li>089</li> 124 <li>090</li> 125 <li>091</li> 126 <li>092</li> 127 <li>093</li> 128 <li>094</li> 129 <li>095</li> 130 <li>096</li> 131 <li>097</li> 132 <li>098</li> 133 <li>099</li> 134 <li>100</li> 135 <li>101</li> 136 <li>102</li> 137 <li>103</li> 138 <li>104</li> 139 <li>105</li> 140 <li>106</li> 141 <li>107</li> 142 <li>108</li> 143 <li>109</li> 144 <li>110</li> 145 <li>111</li> 146 <li>112</li> 147 <li>113</li> 148 <li>114</li> 149 <li>115</li> 150 <li>116</li> 151 <li>117</li> 152 <li>118</li> 153 <li>119</li> 154 <li>120</li> 155 <li>121</li> 156 <li>122</li> 157 <li>123</li> 158 <li>124</li> 159 <li>125</li> 160 <li>126</li> 161 <li>127</li> 162 <li>128</li> 163 <li>129</li> 164 <li>130</li> 165 <li>131</li> 166 <li>132</li> 167 <li>133</li> 168 <li>134</li> 169 <li>135</li> 170 <li>136</li> 171 <li>137</li> 172 <li>138</li> 173 <li>139</li> 174 <li>140</li> 175 <li>141</li> 176 <li>142</li> 177 <li>143</li> 178 <li>144</li> 179 <li>145</li> 180 <li>146</li> 181 <li>147</li> 182 <li>148</li> 183 <li>149</li> 184 <li>150</li> 185 <li>151</li> 186 <li>152</li> 187 <li>153</li> 188 <li>154</li> 189 <li>155</li> 190 <li>156</li> 191 <li>157</li> 192 <li>158</li> 193 <li>159</li> 194 <li>160</li> 195 <li>161</li> 196 <li>162</li> 197 <li>163</li> 198 <li>164</li> 199 <li>165</li> 200 <li>166</li> 201 <li>167</li> 202 <li>168</li> 203 <li>169</li> 204 <li>170</li> 205 <li>171</li> 206 <li>172</li> 207 <li>173</li> 208 <li>174</li> 209 <li>175</li> 210 <li>176</li> 211 <li>177</li> 212 <li>178</li> 213 <li>179</li> 214 <li>180</li> 215 <li>181</li> 216 <li>182</li> 217 <li>183</li> 218 <li>184</li> 219 <li>185</li> 220 <li>186</li> 221 <li>187</li> 222 <li>188</li> 223 <li>189</li> 224 <li>190</li> 225 <li>191</li> 226 <li>192</li> 227 <li>193</li> 228 <li>194</li> 229 <li>195</li> 230 <li>196</li> 231 <li>197</li> 232 <li>198</li> 233 <li>199</li> 234 <li>200</li> 235 <li>201</li> 236 <li>202</li> 237 <li>203</li> 238 <li>204</li> 239 <li>205</li> 240 <li>206</li> 241 <li>207</li> 242 <li>208</li> 243 <li>209</li> 244 <li>210</li> 245 <li>211</li> 246 <li>212</li> 247 <li>213</li> 248 <li>214</li> 249 <li>215</li> 250 <li>216</li> 251 <li>217</li> 252 <li>218</li> 253 <li>219</li> 254 <li>220</li> 255 <li>221</li> 256 <li>222</li> 257 <li>223</li> 258 <li>224</li> 259 <li>225</li> 260 <li>226</li> 261 <li>227</li> 262 <li>228</li> 263 <li>229</li> 264 <li>230</li> 265 <li>231</li> 266 <li>232</li> 267 <li>233</li> 268 <li>234</li> 269 <li>235</li> 270 <li>236</li> 271 <li>237</li> 272 <li>238</li> 273 <li>239</li> 274 <li>240</li> 275 <li>241</li> 276 <li>242</li> 277 <li>243</li> 278 <li>244</li> 279 <li>245</li> 280 <li>246</li> 281 <li>247</li> 282 <li>248</li> 283 <li>249</li> 284 <li>250</li> 285 <li>251</li> 286 <li>252</li> 287 <li>253</li> 288 <li>254</li> 289 <li>255</li> 290 <li>256</li> 291 <li>257</li> 292 <li>258</li> 293 <li>259</li> 294 <li>260</li> 295 <li>261</li> 296 <li>262</li> 297 <li>263</li> 298 <li>264</li> 299 <li>265</li> 300 <li>266</li> 301 <li>267</li> 302 <li>268</li> 303 <li>269</li> 304 <li>270</li> 305 <li>271</li> 306 <li>272</li> 307 <li>273</li> 308 <li>274</li> 309 <li>275</li> 310 <li>276</li> 311 <li>277</li> 312 <li>278</li> 313 <li>279</li> 314 <li>280</li> 315 <li>281</li> 316 <li>282</li> 317 <li>283</li> 318 <li>284</li> 319 <li>285</li> 320 <li>286</li> 321 <li>287</li> 322 <li>288</li> 323 <li>289</li> 324 <li>290</li> 325 <li>291</li> 326 <li>292</li> 327 <li>293</li> 328 <li>294</li> 329 <li>295</li> 330 <li>296</li> 331 <li>297</li> 332 <li>298</li> 333 <li>299</li> 334 <li>300</li> 335 <li>301</li> 336 <li>302</li> 337 <li>303</li> 338 <li>304</li> 339 <li>305</li> 340 <li>306</li> 341 <li>307</li> 342 <li>308</li> 343 <li>309</li> 344 <li>310</li> 345 <li>311</li> 346 <li>312</li> 347 <li>313</li> 348 <li>314</li> 349 <li>315</li> 350 <li>316</li> 351 <li>317</li> 352 <li>318</li> 353 <li>319</li> 354 <li>320</li> 355 <li>321</li> 356 <li>322</li> 357 <li>323</li> 358 <li>324</li> 359 <li>325</li> 360 <li>326</li> 361 <li>327</li> 362 <li>328</li> 363 <li>329</li> 364 <li>330</li> 365 <li>331</li> 366 <li>332</li> 367 <li>333</li> 368 <li>334</li> 369 <li>335</li> 370 <li>336</li> 371 <li>337</li> 372 <li>338</li> 373 <li>339</li> 374 <li>340</li> 375 <li>341</li> 376 <li>342</li> 377 <li>343</li> 378 <li>344</li> 379 <li>345</li> 380 <li>346</li> 381 <li>347</li> 382 <li>348</li> 383 <li>349</li> 384 <li>350</li> 385 <li>351</li> 386 <li>352</li> 387 <li>353</li> 388 <li>354</li> 389 <li>355</li> 390 <li>356</li> 391 <li>357</li> 392 <li>358</li> 393 <li>359</li> 394 <li>360</li> 395 <li>361</li> 396 <li>362</li> 397 <li>363</li> 398 <li>364</li> 399 <li>365</li> 400 <li>366</li> 401 <li>367</li> 402 <li>368</li> 403 <li>369</li> 404 <li>370</li> 405 <li>371</li> 406 <li>372</li> 407 <li>373</li> 408 <li>374</li> 409 <li>375</li> 410 <li>376</li> 411 <li>377</li> 412 <li>378</li> 413 <li>379</li> 414 <li>380</li> 415 <li>381</li> 416 <li>382</li> 417 <li>383</li> 418 <li>384</li> 419 <li>385</li> 420 <li>386</li> 421 <li>387</li> 422 <li>388</li> 423 <li>389</li> 424 <li>390</li> 425 <li>391</li> 426 <li>392</li> 427 <li>393</li> 428 <li>394</li> 429 <li>395</li> 430 <li>396</li> 431 <li>397</li> 432 <li>398</li> 433 <li>399</li> 434 <li>400</li> 435 <li>401</li> 436 <li>402</li> 437 <li>403</li> 438 <li>404</li> 439 <li>405</li> 440 <li>406</li> 441 <li>407</li> 442 <li>408</li> 443 <li>409</li> 444 <li>410</li> 445 <li>411</li> 446 <li>412</li> 447 <li>413</li> 448 <li>414</li> 449 <li>415</li> 450 <li>416</li> 451 <li>417</li> 452 <li>418</li> 453 <li>419</li> 454 <li>420</li> 455 <li>421</li> 456 <li>422</li> 457 <li>423</li> 458 <li>424</li> 459 <li>425</li> 460 <li>426</li> 461 <li>427</li> 462 <li>428</li> 463 <li>429</li> 464 <li>430</li> 465 <li>431</li> 466 <li>432</li> 467 <li>433</li> 468 <li>434</li> 469 <li>435</li> 470 <li>436</li> 471 <li>437</li> 472 <li>438</li> 473 <li>439</li> 474 <li>440</li> 475 <li>441</li> 476 <li>442</li> 477 <li>443</li> 478 <li>444</li> 479 <li>445</li> 480 <li>446</li> 481 <li>447</li> 482 <li>448</li> 483 <li>449</li> 484 <li>450</li> 485 <li>451</li> 486 <li>452</li> 487 <li>453</li> 488 <li>454</li> 489 <li>455</li> 490 <li>456</li> 491 <li>457</li> 492 <li>458</li> 493 <li>459</li> 494 <li>460</li> 495 <li>461</li> 496 <li>462</li> 497 <li>463</li> 498 <li>464</li> 499 <li>465</li> 500 <li>466</li> 501 <li>467</li> 502 <li>468</li> 503 <li>469</li> 504 <li>470</li> 505 <li>471</li> 506 <li>472</li> 507 <li>473</li> 508 <li>474</li> 509 <li>475</li> 510 <li>476</li> 511 <li>477</li> 512 <li>478</li> 513 <li>479</li> 514 <li>480</li> 515 <li>481</li> 516 <li>482</li> 517 <li>483</li> 518 <li>484</li> 519 <li>485</li> 520 <li>486</li> 521 <li>487</li> 522 <li>488</li> 523 <li>489</li> 524 <li>490</li> 525 <li>491</li> 526 <li>492</li> 527 <li>493</li> 528 <li>494</li> 529 <li>495</li> 530 <li>496</li> 531 <li>497</li> 532 <li>498</li> 533 <li>499</li> 534 <li>500</li> 535 <li>501</li> 536 <li>502</li> 537 <li>503</li> 538 <li>504</li> 539 <li>505</li> 540 <li>506</li> 541 <li>507</li> 542 <li>508</li> 543 <li>509</li> 544 <li>510</li> 545 <li>511</li> 546 <li>512</li> 547 <li>513</li> 548 <li>514</li> 549 <li>515</li> 550 <li>516</li> 551 <li>517</li> 552 <li>518</li> 553 <li>519</li> 554 <li>520</li> 555 <li>521</li> 556 <li>522</li> 557 <li>523</li> 558 <li>524</li> 559 <li>525</li> 560 <li>526</li> 561 <li>527</li> 562 <li>528</li> 563 <li>529</li> 564 <li>530</li> 565 <li>531</li> 566 <li>532</li> 567 <li>533</li> 568 <li>534</li> 569 <li>535</li> 570 <li>536</li> 571 <li>537</li> 572 <li>538</li> 573 <li>539</li> 574 <li>540</li> 575 <li>541</li> 576 <li>542</li> 577 <li>543</li> 578 <li>544</li> 579 <li>545</li> 580 <li>546</li> 581 <li>547</li> 582 <li>548</li> 583 <li>549</li> 584 <li>550</li> 585 <li>551</li> 586 <li>552</li> 587 <li>553</li> 588 <li>554</li> 589 <li>555</li> 590 <li>556</li> 591 <li>557</li> 592 <li>558</li> 593 <li>559</li> 594 <li>560</li> 595 <li>561</li> 596 <li>562</li> 597 <li>563</li> 598 <li>564</li> 599 <li>565</li> 600 <li>566</li> 601 <li>567</li> 602 <li>568</li> 603 <li>569</li> 604 <li>570</li> 605 <li>571</li> 606 <li>572</li> 607 <li>573</li> 608 <li>574</li> 609 <li>575</li> 610 <li>576</li> 611 <li>577</li> 612 <li>578</li> 613 <li>579</li> 614 <li>580</li> 615 <li>581</li> 616 <li>582</li> 617 <li>583</li> 618 <li>584</li> 619 <li>585</li> 620 <li>586</li> 621 <li>587</li> 622 <li>588</li> 623 <li>589</li> 624 <li>590</li> 625 <li>591</li> 626 <li>592</li> 627 <li>593</li> 628 <li>594</li> 629 <li>595</li> 630 <li>596</li> 631 <li>597</li> 632 <li>598</li> 633 <li>599</li> 634 <li>600</li> 635 <li>601</li> 636 <li>602</li> 637 <li>603</li> 638 <li>604</li> 639 <li>605</li> 640 <li>606</li> 641 <li>607</li> 642 <li>608</li> 643 <li>609</li> 644 <li>610</li> 645 <li>611</li> 646 <li>612</li> 647 <li>613</li> 648 <li>614</li> 649 <li>615</li> 650 <li>616</li> 651 <li>617</li> 652 <li>618</li> 653 <li>619</li> 654 <li>620</li> 655 <li>621</li> 656 <li>622</li> 657 <li>623</li> 658 <li>624</li> 659 <li>625</li> 660 <li>626</li> 661 <li>627</li> 662 <li>628</li> 663 <li>629</li> 664 <li>630</li> 665 <li>631</li> 666 <li>632</li> 667 <li>633</li> 668 <li>634</li> 669 <li>635</li> 670 <li>636</li> 671 <li>637</li> 672 <li>638</li> 673 <li>639</li> 674 <li>640</li> 675 <li>641</li> 676 <li>642</li> 677 <li>643</li> 678 <li>644</li> 679 <li>645</li> 680 <li>646</li> 681 <li>647</li> 682 <li>648</li> 683 <li>649</li> 684 <li>650</li> 685 <li>651</li> 686 <li>652</li> 687 <li>653</li> 688 <li>654</li> 689 <li>655</li> 690 <li>656</li> 691 <li>657</li> 692 <li>658</li> 693 <li>659</li> 694 <li>660</li> 695 <li>661</li> 696 <li>662</li> 697 <li>663</li> 698 <li>664</li> 699 <li>665</li> 700 <li>666</li> 701 <li>667</li> 702 <li>668</li> 703 <li>669</li> 704 <li>670</li> 705 <li>671</li> 706 <li>672</li> 707 <li>673</li> 708 <li>674</li> 709 <li>675</li> 710 <li>676</li> 711 <li>677</li> 712 <li>678</li> 713 <li>679</li> 714 <li>680</li> 715 <li>681</li> 716 <li>682</li> 717 <li>683</li> 718 <li>684</li> 719 <li>685</li> 720 <li>686</li> 721 <li>687</li> 722 <li>688</li> 723 <li>689</li> 724 <li>690</li> 725 <li>691</li> 726 <li>692</li> 727 <li>693</li> 728 <li>694</li> 729 <li>695</li> 730 <li>696</li> 731 <li>697</li> 732 <li>698</li> 733 <li>699</li> 734 <li>700</li> 735 <li>701</li> 736 <li>702</li> 737 <li>703</li> 738 <li>704</li> 739 <li>705</li> 740 <li>706</li> 741 <li>707</li> 742 <li>708</li> 743 <li>709</li> 744 <li>710</li> 745 <li>711</li> 746 <li>712</li> 747 <li>713</li> 748 <li>714</li> 749 <li>715</li> 750 <li>716</li> 751 <li>717</li> 752 <li>718</li> 753 <li>719</li> 754 <li>720</li> 755 <li>721</li> 756 <li>722</li> 757 <li>723</li> 758 <li>724</li> 759 <li>725</li> 760 <li>726</li> 761 <li>727</li> 762 <li>728</li> 763 <li>729</li> 764 <li>730</li> 765 <li>731</li> 766 <li>732</li> 767 <li>733</li> 768 <li>734</li> 769 <li>735</li> 770 <li>736</li> 771 <li>737</li> 772 <li>738</li> 773 <li>739</li> 774 <li>740</li> 775 <li>741</li> 776 <li>742</li> 777 <li>743</li> 778 <li>744</li> 779 <li>745</li> 780 <li>746</li> 781 <li>747</li> 782 <li>748</li> 783 <li>749</li> 784 <li>750</li> 785 <li>751</li> 786 <li>752</li> 787 <li>753</li> 788 <li>754</li> 789 <li>755</li> 790 <li>756</li> 791 <li>757</li> 792 <li>758</li> 793 <li>759</li> 794 <li>760</li> 795 <li>761</li> 796 <li>762</li> 797 <li>763</li> 798 <li>764</li> 799 <li>765</li> 800 <li>766</li> 801 <li>767</li> 802 <li>768</li> 803 <li>769</li> 804 <li>770</li> 805 <li>771</li> 806 <li>772</li> 807 <li>773</li> 808 <li>774</li> 809 <li>775</li> 810 <li>776</li> 811 <li>777</li> 812 <li>778</li> 813 <li>779</li> 814 <li>780</li> 815 <li>781</li> 816 <li>782</li> 817 <li>783</li> 818 <li>784</li> 819 <li>785</li> 820 <li>786</li> 821 <li>787</li> 822 <li>788</li> 823 <li>789</li> 824 <li>790</li> 825 <li>791</li> 826 <li>792</li> 827 <li>793</li> 828 <li>794</li> 829 <li>795</li> 830 <li>796</li> 831 <li>797</li> 832 <li>798</li> 833 <li>799</li> 834 <li>800</li> 835 <li>801</li> 836 <li>802</li> 837 <li>803</li> 838 <li>804</li> 839 <li>805</li> 840 <li>806</li> 841 <li>807</li> 842 <li>808</li> 843 <li>809</li> 844 <li>810</li> 845 <li>811</li> 846 <li>812</li> 847 <li>813</li> 848 <li>814</li> 849 <li>815</li> 850 <li>816</li> 851 <li>817</li> 852 <li>818</li> 853 <li>819</li> 854 <li>820</li> 855 <li>821</li> 856 <li>822</li> 857 <li>823</li> 858 <li>824</li> 859 <li>825</li> 860 <li>826</li> 861 <li>827</li> 862 <li>828</li> 863 <li>829</li> 864 <li>830</li> 865 <li>831</li> 866 <li>832</li> 867 <li>833</li> 868 <li>834</li> 869 <li>835</li> 870 <li>836</li> 871 <li>837</li> 872 <li>838</li> 873 <li>839</li> 874 <li>840</li> 875 <li>841</li> 876 <li>842</li> 877 <li>843</li> 878 <li>844</li> 879 <li>845</li> 880 <li>846</li> 881 <li>847</li> 882 <li>848</li> 883 <li>849</li> 884 <li>850</li> 885 <li>851</li> 886 <li>852</li> 887 <li>853</li> 888 <li>854</li> 889 <li>855</li> 890 <li>856</li> 891 <li>857</li> 892 <li>858</li> 893 <li>859</li> 894 <li>860</li> 895 <li>861</li> 896 <li>862</li> 897 <li>863</li> 898 <li>864</li> 899 <li>865</li> 900 <li>866</li> 901 <li>867</li> 902 <li>868</li> 903 <li>869</li> 904 <li>870</li> 905 <li>871</li> 906 <li>872</li> 907 <li>873</li> 908 <li>874</li> 909 <li>875</li> 910 <li>876</li> 911 <li>877</li> 912 <li>878</li> 913 <li>879</li> 914 <li>880</li> 915 <li>881</li> 916 <li>882</li> 917 <li>883</li> 918 <li>884</li> 919 <li>885</li> 920 <li>886</li> 921 <li>887</li> 922 <li>888</li> 923 <li>889</li> 924 <li>890</li> 925 <li>891</li> 926 <li>892</li> 927 <li>893</li> 928 <li>894</li> 929 <li>895</li> 930 <li>896</li> 931 <li>897</li> 932 <li>898</li> 933 <li>899</li> 934 <li>900</li> 935 <li>901</li> 936 <li>902</li> 937 <li>903</li> 938 <li>904</li> 939 <li>905</li> 940 <li>906</li> 941 <li>907</li> 942 <li>908</li> 943 <li>909</li> 944 <li>910</li> 945 <li>911</li> 946 <li>912</li> 947 <li>913</li> 948 <li>914</li> 949 <li>915</li> 950 <li>916</li> 951 <li>917</li> 952 <li>918</li> 953 <li>919</li> 954 <li>920</li> 955 <li>921</li> 956 <li>922</li> 957 <li>923</li> 958 <li>924</li> 959 <li>925</li> 960 <li>926</li> 961 <li>927</li> 962 <li>928</li> 963 <li>929</li> 964 <li>930</li> 965 <li>931</li> 966 <li>932</li> 967 <li>933</li> 968 <li>934</li> 969 <li>935</li> 970 <li>936</li> 971 <li>937</li> 972 <li>938</li> 973 <li>939</li> 974 <li>940</li> 975 <li>941</li> 976 <li>942</li> 977 <li>943</li> 978 <li>944</li> 979 <li>945</li> 980 <li>946</li> 981 <li>947</li> 982 <li>948</li> 983 <li>949</li> 984 <li>950</li> 985 <li>951</li> 986 <li>952</li> 987 <li>953</li> 988 <li>954</li> 989 <li>955</li> 990 <li>956</li> 991 <li>957</li> 992 <li>958</li> 993 <li>959</li> 994 <li>960</li> 995 <li>961</li> 996 <li>962</li> 997 <li>963</li> 998 <li>964</li> 999 <li>965</li> 1000 <li>966</li> 1001 <li>967</li> 1002 <li>968</li> 1003 <li>969</li> 1004 <li>970</li> 1005 <li>971</li> 1006 <li>972</li> 1007 <li>973</li> 1008 <li>974</li> 1009 <li>975</li> 1010 <li>976</li> 1011 <li>977</li> 1012 <li>978</li> 1013 <li>979</li> 1014 <li>980</li> 1015 <li>981</li> 1016 <li>982</li> 1017 <li>983</li> 1018 <li>984</li> 1019 <li>985</li> 1020 <li>986</li> 1021 <li>987</li> 1022 <li>988</li> 1023 <li>989</li> 1024 <li>990</li> 1025 <li>991</li> 1026 <li>992</li> 1027 <li>993</li> 1028 <li>994</li> 1029 <li>995</li> 1030 <li>996</li> 1031 <li>997</li> 1032 <li>998</li> 1033 <li>999</li> 1034 <li>1000</li> 1035 </ul> 1036 </body> 1037 </html>
三.事件解绑
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .father{ 8 width: 300px; 9 height: 300px; 10 background-color: pink; 11 border:1px solid #f00; 12 } 13 .father .son{ 14 width: 100px; 15 height: 100px; 16 background: deepskyblue; 17 } 18 </style> 19 <script src="lib/jquery-1.12.2.js"></script> 20 </head> 21 <body> 22 <div class="father"> 23 父盒子 24 <div class="son">子盒子</div> 25 </div> 26 </body> 27 </html> 28 <script> 29 // 解绑方法一：-------------------- 30 $('.father').on('click',function () { 31 alert('你通过了ｏｎ注册了click事件'); 32 // 解绑事件１ 33 $('.father').off('click'); 34 }); 35 36 37 // 解绑方法二：---------------------- 38 $('.father').on('mouseenter',function () { 39 alert('你通过了ｏｎ注册了mouseenter事件'); 40 41 }); 42 // 解绑事件 43 $('.father').off('mouseenter'); 44 45 46 // 解绑方法三：-------------------------- 47 function fn1() { 48 alert('你通过了on注册了mouseenter事件'); 49 } 50 function fn2() { 51 alert('你通过了on注册了mouseenter事件222'); 52 } 53 $('.father').on('mouseenter',fn1); 54 $('.father').on('mouseenter',fn2); 55 56 $('.father').off('mouseenter',fn1); 57 $('.father').off('mouseenter',fn2); 58 59 60 </script>
四.通过代码触发事件
能够完成jQuery的事件触发
.click()
.trigger('click')
例子:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .product{ 8 border: 1px solid #2AB89A; 9 width: 70px; 10 height: 70px; 11 } 12 </style> 13 <script src="lib/jquery-1.12.2.js"></script> 14 15 <script> 16 $(function () { 17 $('.btn').click(function () { 18 console.log('我点击了抢购了这个'); 19 }); 20 setInterval(function () { 21 // 通过代码触发事件方法一 22 // $('.btn').click(); 23 // 通过代码触发事件方法二 24 $('.btn').trigger('click'); 25 },1000); 26 }); 27 </script> 28 </head> 29 <body> 30 <div class="product"> 31 <img src="images/05.jpg" alt=""> 32 </div> 33 <button class="btn">抢购</button> 34 </body> 35 </html>
五.阻止事件冒泡和阻止浏览器默认行为
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .father{ 8 width: 300px; 9 height: 300px; 10 background-color: pink; 11 border:1px solid #f00; 12 } 13 .father .son{ 14 width: 100px; 15 height: 100px; 16 background: deepskyblue; 17 } 18 </style> 19 <script src="lib/jquery-1.12.2.js"></script> 20 21 <body> 22 <div class="father"> 23 父盒子 24 <div class="son">子盒子</div> 25 <form action=""> 26 <input type="text" name="user"> 27 <input type="submit" value="提交"> 28 </form> 29 </div> 30 </body> 31 </html> 32 <script> 33 /** 34 1)千万不要在事件委托那里阻止事件冒泡:因为事件委托的实现是由冒泡实现的 35 36 2)与其中阻止事件冒泡和阻止浏览器默认行为都可以用return false;来完成 37 */ 38 $('.son').click(function (event) { 39 event.stopPropagation(); // 方法二 阻止事件冒泡 40 alert('son注册了一个事件'); 41 // return false; // 方法一 解决冒泡 42 }); 43 44 //阻止浏览器默认行为（例如阻止用户的空内容表单提交跳转的行为） 45 $('[type=submit]').click(function () { 46 47 if( $('[type=text]').val().trim().length === 0) { 48 // event.preventDefault(); // 方法一. 49 return false; // 方法二 50 } 51 }); 52 </script> 53 </head>
